open-index/open-npm huggingface dataset:
npm package: @preachjs/themes
Description: themes provider for preact
Author: reaper
Latest version: 0.0.6

# @preachjs/themes

> Simple, lightweight theme management for Preact applications

[![NPM](https://img.shields.io/npm/v/@preachjs/themes.svg)](https://www.npmjs.com/package/@preachjs/themes)

[Demo &rarr;](https://preachjs.github.io/themes/)

## Highlights

- 📦 Tiny bundle size (~413B GZipped)
- 🤌 Simple API
- No FOUC (in cases where preact isn't loaded on network)
- Based on [@dumbjs/persona](https://github.com/dumbjs/persona)

## Install

```sh
# npm
npm install @preachjs/themes

# yarn
yarn add @preachjs/themes

# pnpm
pnpm add @preachjs/themes
```

## Usage

```jsx
import { ThemeProvider, useTheme } from '@preachjs/themes'

const Main = () => {
  return (
    <ThemeProvider>
      <App />
    </ThemeProvider>
  )
}

const App = () => {
  const { theme, setTheme } = useTheme('system')

  return (
    <>
      <p>Current Theme: {theme}</p>
      <button
        onClick={() => {
          setTheme('light')
        }}
      >
        Light
      </button>
      <button
        onClick={() => {
          setTheme('dark')
        }}
      >
        Dark
      </button>
      <button
        onClick={() => {
          setTheme('system')
        }}
      >
        System
      </button>
    </>
  )
}
```

## Configuration

The `ThemeProvider` component accepts the following props:

- `defaultTheme`: The initial theme to use (`'light'`, `'dark'`, or `'system'`).
  Defaults to `'system'`.
- `storageKey`: The key used to persist theme preference in localStorage.
  Defaults to `'theme'`.

```jsx
<ThemeProvider defaultTheme="dark" storageKey="my-app-theme">
  <App />
</ThemeProvider>
```

## Theme Options

Three theme options are available:

- `light`: Forces light theme
- `dark`: Forces dark theme
- `system`: Automatically switches between light and dark based on system
  preferences

## API Reference

### useTheme(defaultTheme?: string)

React hook that provides theme management functionality.

Returns:

- `theme`: Current theme value (`'light'`, `'dark'`, or `'system'`)
- `setTheme`: Function to update the theme

Example:

```jsx
const { theme, setTheme } = useTheme('system')
```

### ThemeProvider

Context provider component that must wrap your application.

Props:

- `defaultTheme`: Initial theme (optional)
- `storageKey`: localStorage key for persistence (optional)
- `children`: React nodes

Example:

```jsx
<ThemeProvider defaultTheme="system">
  <App />
</ThemeProvider>
```

### Advanced Usage

For Advanced use cases like multiple themes and different default states, you
can write your own context and use
[@dumbjs/persona](https://github.com/dumbjs/persona) that abstracts the browser
APIs to make it simpler for you to use.
npm package: @preachjs/toast
Description: toasts for preact
Author: reaper
Latest version: 0.0.5

# @preachjs/toast

> Simple toasts for preact

[![NPM](https://img.shields.io/npm/v/@preachjs/toast.svg)](https://www.npmjs.com/package/@preachjs/toast)

[Demo &rarr;](https://preachjs.github.io/toast/)

## Highlights

- 💅 CSS based
- ⚡️ Built on @preact/signals
- 📦 Tiny bundle size (~1KB GZipped)
- 🤌 Simple API

## Install

```sh
npm i @preachjs/toast
```

## Usage

```js
import { toast, Toaster } from '@preachjs/toast'

const App = () => {
  return (
    <div>
      <button onClick={() => toast('hello')}>toast</button>
      <Toaster />
    </div>
  )
}
```

## API

### `Toaster`

Component that acts a container for the toasts.

### `toast(message: string, options?: Options)`

Displays a toast with the provided message.

#### Options

| Name       | Type   | Default      | Description                                                                                                                     |
| ---------- | ------ | ------------ | ------------------------------------------------------------------------------------------------------------------------------- |
| position   | string | 'top-center' | Position of the toast. Available options: 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right' |
| closeDelay | number | 3000         | Delay in milliseconds before the toast automatically closes.                                                                    |

#### MessageInput

Can be either a string or a JSX element:

```tsx
type MessageInput = string | JSX.Element
```

#### Toast Variants

- `toast.success(message: MessageInput, options?: Options)` - Green success
  toast
- `toast.error(message: MessageInput, options?: Options)` - Red error toast
- `toast.info(message: MessageInput, options?: Options)` - Blue info toast
- `toast.warning(message: MessageInput, options?: Options)` - Yellow warning
  toast

### `toast.promise(promise: Promise, options: PromiseOptions)`

Displays toasts for different promise states.

#### PromiseOptions

| Name    | Type   | Description                                      |
| ------- | ------ | ------------------------------------------------ |
| loading | string | Message to display while the promise is pending. |
| success | string | Message to display if the promise resolves.      |
| error   | string | Message to display if the promise rejects.       |

### Promise Example

```tsx
const saveData = async () => {
  const promise = fetch('/api/data')

  toast.promise(promise, {
    loading: 'Saving...',
    success: 'Data saved!',
    error: 'Failed to save data',
  })
}
```

## License

MIT
npm package: @preact-hooks/event
Description: A custom Preact Hook that provides a declarative useEventListener.
Author: Rahim Alwer
Latest version: 1.0.7

<div align="center">
<h1>Preact Hooks - Event</h1>

> Inspired by [donovan/use-event-listener](https://github.com/donavon/use-event-listener)

[![version][version-badge]][package]
[![MIT License][license-badge]][license]

<p>
A custom Preact Hook that provides a declarative useEventListener.
</p>
</div>

<hr />

## Table of Contents

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->


- [Installation](#installation)
- [Docs](#docs)
- [LICENSE](#license)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Installation

***This package has [Preact 10+](https://github.com/preactjs/preact) as a peer dependency.***

`npm install @preact-hooks/event` or `yarn add @preact-hooks/event`

You can also load it via the [unpkg](https://unpkg.com) CDN

`https://unpkg.com/@preact-hooks/event` will download the latest UMD bundle.

## Docs

For usage and examples see [donovan/use-event-listener](https://github.com/donavon/use-event-listener#usage).

## LICENSE

[MIT](LICENSE)

<!-- prettier-ignore-start -->
[package]: https://www.npmjs.com/package/@preact-hooks/event
[version-badge]: https://img.shields.io/npm/v/@preact-hooks/event
[license]: https://github.com/mihar-22/preact-hooks-event/blob/master/LICENSE
[license-badge]: https://img.shields.io/github/license/mihar-22/preact-hooks-event?color=b
<!-- prettier-ignore-end -->
npm package: @preact-hooks/instance
Description: A custom Preact Hook that provides a sensible alternative to useRef for storing instance variables.
Author: Rahim Alwer
Latest version: 1.0.6

<div align="center">
<h1>Preact Hooks - Instance</h1>

> Inspired by [donovan/use-instance](https://github.com/donavon/use-instance)

[![version][version-badge]][package]
[![MIT License][license-badge]][license]

<p>
A custom Preact Hook that provides a sensible alternative to useRef for storing instance variables.
</p>
</div>

<hr />

## Table of Contents

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->


- [Why?](#why)
- [Installation](#installation)
- [Docs](#docs)
- [LICENSE](#license)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Why? 

**See more in-depth explanation at:** [donovan/use-instance](https://github.com/donavon/use-instance#why).

- `useRef` is weird. 
- The fact that you have to access it via `.current` is strange.
- You treat the object returned by `useInstance` just like you would `this` in a class component, so you're already familiar with how it works.
- Use `useRef` if you're dealing with actual DOM elements.
- Use `useInstance` for instance properties and methods.

## Installation

***This package has [Preact 10+](https://github.com/preactjs/preact) as a peer dependency.***

`npm install @preact-hooks/instance` or `yarn add @preact-hooks/instance`

You can also load it via the [unpkg](https://unpkg.com) CDN

`https://unpkg.com/@preact-hooks/instance` will download the latest UMD bundle.

## Docs

For usage and examples see [donovan/use-instance](https://github.com/donavon/use-instance#usage).

## LICENSE

[MIT](LICENSE)

<!-- prettier-ignore-start -->
[package]: https://www.npmjs.com/package/@preact-hooks/instance
[version-badge]: https://img.shields.io/npm/v/@preact-hooks/instance
[license]: https://github.com/mihar-22/preact-hooks-instance/blob/master/LICENSE
[license-badge]: https://img.shields.io/github/license/mihar-22/preact-hooks-instance?color=b
<!-- prettier-ignore-end -->
npm package: @preact-signals/unified-signals
Description: Signals package that can used in any environment, via import remapping
Author: Valerii Smirnov
Latest version: 0.3.1

# `@preact-signals/unified-signals`

`@preact-signals/unified-signals` is runtime agnostic `@preact/signals` reexport. That can be used for library developers that want to rely on user preact signals runtime. If you want to write library that uses preact signals you can take benefit from `@preact-signals/unified-signals`. It uses shims instead of hooks if runtime do not providing them. Also we ship `untracked` polyfill in `untracked-polyfill` entry.

## Installation

You can install `@preact-signals/unified-signals` using your package manager of choice:

```bash
# npm
npm i @preact-signals/unified-signals
# yarn
yarn i @preact-signals/unified-signals
# pnpm
pnpm i @preact-signals/unified-signals
```

## Usage in library

If you are using `@preact-signals/unified-signals` in your library to preserve runtime agnosticism you can use should add this lines
into your `package.json`:

```json
{
  "peerDependencies": {
    "@preact/signals": ">=1.2.0",
    "@preact/signals-core": ">=1.5.0",
    "@preact/signals-react": ">=2.0.0",
    "@preact-signals/safe-react": "workspace:*"
  },
  "peerDependenciesMeta": {
    "@preact/signals": {
      "optional": true
    },
    "@preact/signals-core": {
      "optional": true
    },
    "@preact-signals/safe-react": {
      "optional": true
    }
  }
}
```

## API Overview

Basic `@preact/signals` API and untracked-polyfill

### `untrackedPolyfill`

On old versions of preact signals untracked is not implemented, so it can be reasonable to use polyfill

```ts
import * as signals from '@preact-signals/unified-signals'
import {untrackedPolyfill} from '@preact-signals/unified-signals/untracked-polyfill'

const {
  signal,
  computed
} = signals
const untracked = signals?.untracked ?? untrackedPolyfill

const a = signal(1);
const b = signal(2);
const c = computed(() => a.value + untracked(() => b.value));

console.log(c.value); // 3
a.value = 2;
console.log(c.value); // 4
b.value = 3;
console.log(c.value); // 4
```

## License

`@preact-signals/unified-signals` is licensed under the [MIT License](./LICENSE).
npm package: @preact/compat
Description: Alias of preact/compat
Author: Preact Team
Latest version: 18.3.2

# @preact/compat - alias package

This package is intended to be used to resolve `react` to `preact/compat` via built-in features in npm, which requires a separate package to be used. Therefore this package just re-exports `preact/compat` as is.

To learn more about Preact itself, check out the main repo: https://github.com/preactjs/preact

## Usage

Run:

```bash
npm install react@npm:@preact/compat react-dom@npm:@preact/compat
```

See the [npm docs](https://docs.npmjs.com/cli/v7/commands/npm-install) for more information about aliased installs.

## License

MIT, see the [LICENSE](./LICENSE) file.
npm package: @preact/legacy-compat
Description: Preact compatibility layer that supports deprecated React APIs'
Author: The Preact Authors
Latest version: 0.3.0

# `@preact/legacy-compat` <a href="https://www.npmjs.org/package/@preact/legacy-compat"><img src="https://img.shields.io/npm/v/@preact/legacy-compat.svg?style=flat" alt="npm"></a>

Extended compatibility layer for Preact, supporting deprecated and removed APIs from React 15 and prior.

This module provides a bridging solution for older codebases. For new projects, please use [preact/compat].

### Extended Compatibility Features:

- `createClass()` - including mixins, getInitialState, etc
- string refs
- Built-in PropTypes (`React.PropTypes`)
- [Immutable.js] support
- `renderSubtreeIntoContainer()`

[preact/compat]: https://preactjs.com/guide/v10/switching-to-preact
[immutable.js]: https://immutable-js.github.io/immutable-js/
npm package: @preact/playwright-ct
Description: Playwright Component Testing for Preact
Author: Marvin Hagemeister
Latest version: 0.1.1

# Preact playwright component testing

> **Note**
> Playwright component testing is marked as experimental by the playwright team. 

## Usage

First, install playwright and initialize component testing. Once that is done, install the preact adapter.

```sh
npm init playwright@latest -- --ct
npm install -D @preact/playwright-ct
```

After installing we need to alter our config

```ts
import { PlaywrightTestConfig } from "@preact/playwright-ct";

const config: PlaywrightTestConfig = {
  // Your config
};

export default config;
```

Now you can start adding your first test:

```jsx
// App.jsx
export function App() {
  return <h1>Hello World!</h1>
}
```

```jsx
// App.test.jsx
import { test, expect } from "@preact/playwright-ct";
import { App } from "./App";

test("should work", async ({ mount }) => {
  const component = await mount(<App />);
  await expect(component).toContainText("hello world");
});
```

Follow the offical [playwright component testing documentation](https://playwright.dev/docs/test-components) for more information on how to use it.

## License

MIT, see the [LICENSE](./LICENSE) file.
npm package: @preact/prerender-data-provider
Description: Prerender Prerender data provider for preact-cli apps
Author: Preact Authors
Latest version: 3.0.1

# `prerender-data-provider`

A provider for data added to prerendered pages via preact-cli. Shipped with HOC and a hook.

**Works only with PreactX.**

## Usage

```
const prerenderDataProvider = require('prerender-data-provider');

// TODO: DEMONSTRATE API
```
npm package: @preact/signals-debug
Description: Debugging tools for @preact/signals
Latest version: 1.4.2

# @preact/signals-debug

A powerful debugging toolkit for [@preact/signals](https://github.com/preactjs/signals) that provides detailed insights into signal updates, effects, and computed values.

## Installation

```bash
npm install @preact/signals-debug
# or
yarn add @preact/signals-debug
# or
pnpm add @preact/signals-debug
```

> [!NOTE]
> Ensure this package is imported in the root of your application

## Features

- Track signal value changes and updates
- Monitor effect executions
- Debug computed value recalculations
- Get real-time debugging statistics
- Configurable debugging options

## Usage

```typescript
import { setDebugOptions } from "@preact/signals-debug";

// Configure debug options
setDebugOptions({
	grouped: true, // Group related updates in console output
	enabled: true, // Enable/disable debugging
	spacing: 2, // Number of spaces for nested update indentation
});
```

## Debug Information

The package automatically enhances signals with debugging capabilities:

1. **Value Changes**: Tracks and logs all signal value changes
2. **Effect Tracking**: Monitors effect executions and their dependencies
3. **Computed Values**: Tracks computed value recalculations and dependencies
4. **Update Grouping**: Groups related updates for better visualization
5. **Performance Stats**: Provides active trackers and subscriptions count

## API Reference

### `setDebugOptions(options)`

Configure debugging behavior:

```typescript
setDebugOptions({
	grouped?: boolean;  // Enable/disable update grouping in console
	enabled?: boolean;  // Enable/disable debugging entirely
	spacing?: number;   // Number of spaces for nested update indentation, this can be handy in non-browser environments
});
```

## License

MIT © [Preact Team](https://preactjs.com)
npm package: @preact/signals-devtools-adapter
Description: Communication adapters for @preact/signals-devtools-ui
Latest version: 0.4.0

# @preact/signals-devtools-adapter

Communication adapters for the Preact Signals DevTools UI. This package provides abstraction layers that allow the DevTools UI to communicate with the signals debug system through various mechanisms.

## Installation

```bash
npm install @preact/signals-devtools-adapter
```

## Available Adapters

### BrowserExtensionAdapter

Used when the DevTools UI runs inside a browser extension (Chrome DevTools panel).

```typescript
import { createBrowserExtensionAdapter } from "@preact/signals-devtools-adapter";

const adapter = createBrowserExtensionAdapter();
await adapter.connect();
```

### DirectAdapter

Used when the DevTools UI is embedded directly in the same page as the signals (e.g., for demos, blog posts, or development overlays).

```typescript
import { createDirectAdapter } from "@preact/signals-devtools-adapter";

const adapter = createDirectAdapter({
	targetWindow: window, // optional
	pollInterval: 100, // optional, ms to poll for signals API
	maxWaitTime: 10000, // optional, max time to wait
});
await adapter.connect();
```

### PostMessageAdapter

Used for cross-window/iframe communication when the DevTools UI is in a different frame than the debugged page.

```typescript
import { createPostMessageAdapter } from "@preact/signals-devtools-adapter";

const adapter = createPostMessageAdapter({
	sourceWindow: window,
	sourceOrigin: "https://your-origin.com",
	targetWindow: parentWindow, // optional
	targetOrigin: "https://target-origin.com", // optional
});
await adapter.connect();
```

## Creating Custom Adapters

You can create custom adapters by extending the `BaseAdapter` class:

```typescript
import { BaseAdapter, type Settings } from "@preact/signals-devtools-adapter";

class MyCustomAdapter extends BaseAdapter {
	async connect(): Promise<void> {
		// Your connection logic
		this.setConnectionStatus({ status: "connected", message: "Connected" });
	}

	disconnect(): void {
		// Your cleanup logic
	}

	sendConfig(config: Settings): void {
		// Send configuration to debug system
	}

	requestState(): void {
		// Request current state
	}
}
```

## API

### DevToolsAdapter Interface

```typescript
interface DevToolsAdapter {
	connect(): Promise<void>;
	disconnect(): void;
	sendConfig(config: Settings): void;
	requestState(): void;
	on<K extends keyof AdapterEvents>(
		event: K,
		listener: AdapterEvents[K]
	): Unsubscribe;
	getConnectionStatus(): ConnectionStatus;
	isSignalsAvailable(): boolean;
}
```

### Events

- `signalUpdate` - Signal updates received from the debug system
- `signalInit` - Initialization signal from the debug system
- `signalsAvailable` - Signals availability changed
- `configReceived` - Configuration received from debug system
- `connectionStatusChanged` - Connection status changed

## License

MIT
npm package: @preact/signals-preact-transform
Description: Manage state with style in Preact
Latest version: 0.1.0

# Signals Preact Transform

A Babel plugin to provide names to all your `useComputed` and `useSignal` invocations.

## Installation:

```sh
npm i --save-dev @preact/signals-preact-transform
```

## Usage

To setup the transform plugin, add the following to your Babel config:

```js
// babel.config.js
module.exports = {
	plugins: [["module:@preact/signals-preact-transform"]],
};
```

As this is a development plugin it is advised to remove it when you
go to production to remove some bundle size.

## License

`MIT`, see the [LICENSE](../../LICENSE) file.
npm package: @preaction/cms
Description: Preaction CMS is a barebones, customizeable CMS built on top of simple libraries.
Author: Doug Elkin
Latest version: 3.0.0-alpha.2
Deprecated: The NPM package for Preaction CMS is not supported. You should install Preaction CMS from GitHub: https://github.com/duhdugg/preaction-cms

## Preaction CMS

Preaction CMS is a barebones Content Management System built on top of simple JavaScript libraries. It is intended to be friendly to users, administrators, and developers.

**This is currently under heavy development in preparation for the v3 Beta release.** [View the project board here](https://github.com/duhdugg/preaction-cms/projects/1).

### Running

clone the repo:

`git clone https://github.com/duhdugg/preaction-cms.git`

install dependencies:

`yarn`

build the client:

`yarn build`

run the server:

`yarn start`

### Documentation

- [Preaction CMS Wiki](https://github.com/duhdugg/preaction-cms/wiki)
- [Preaction CMS API Reference](https://duhdugg.github.io/preaction-cms/)
npm package: @preaction/inputs
Description: This is a Bootstrap v5 compatible library of React components intended to provide a consistent and responsive experience for basic user input needs.
Author: Doug Elkin
Latest version: 5.0.0-alpha.12

# Preaction Inputs

This is a Bootstrap v5 compatible library of React components intended to provide a consistent and responsive experience for basic user input needs.

Components provided by this library include:

- Checkbox
- Form
- Input
- Select
- Textarea
- Wysiwyg (using QuillJS)

## Quick Start

The full documentation can be found in the [styleguide](https://duhdugg.github.io/preaction-inputs/v5/index.html) with live, editable examples.

### Installation

`npm install --save-dev @preaction/inputs@latest`

### Usage

```jsx
// bootstrap as a peerDependency means you need to import bootstrap CSS yourself.
// This gives you the flexibility to choose a different build or theme, if you wish.
import 'bootstrap/dist/css/bootstrap.min.css'

// imports must be named, as this alllows shaking unused components from your bundle
import { Form, Input } from '@preaction/inputs'

function App() {
  const [name, setName] = React.useState('')
  return (
    <Form onSubmit={e => e.preventDefault()}>
      <Input label='Name' value={name} valueHandler={setName} />
    </Form>
  )
}
```

### License

> Copyright (c) 2018-2021 Doug Elkin
>
> Permission is hereby granted, free of charge, to any person obtaining a copy
> of this software and associated documentation files (the "Software"), to deal
> in the Software without restriction, including without limitation the rights
> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
> copies of the Software, and to permit persons to whom the Software is
> furnished to do so, subject to the following conditions:
>
> The above copyright notice and this permission notice shall be included in
> all copies or substantial portions of the Software.
>
> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
> SOFTWARE.
npm package: @preaction/validation
Description: This is a small validation library.
Author: Doug Elkin
Latest version: 2.0.6

# Preaction Validation

This is a small validation library for JavaScript using a simple signature for its functions.

## Validator Function Signature

A validator function takes a single value argument and return a string. Validity is determined by the returned string's length.

## Install

### yarn

```bash
yarn add @preaction/validation
```

### npm

```bash
npm install --save @preaction/validation
```

### jsdelivr CDN

```html
<script src="https://cdn.jsdelivr.net/npm/@preaction/validation@latest/dist/preaction-validation.umd.min.js"></script>
```

_Remember to replace `latest` with the version number in production._

## Importing Functions

### ES Module

```js
import { notEmptyValidator } from '@preaction/validation'
```

### CommonJS Module

```js
const { notEmptyValidator } = require('@preaction/validation')
```

### IIFE

```js
const { notEmptyValidator } = window['@preaction/validation']
```

## API

See [API.md](https://github.com/duhdugg/preaction-validation/blob/master/API.md).
npm package: @preamble/preamble-ts-core
Description: An environment neutral JavaScript BDD testing framework written in TypeScript which supports writing test suites in TypeScript.
Author: Jeffrey Schwartz
Latest version: 0.3.4

# Preamble-TS-Core
An environment-neutral JavaScript BDD unit testing framework written in TypeScript.

## This is not your father's Preamble
Preamble-TS-Core is a complete rewrite of the old but now it is written in TypeScript. Out with the old and in with the new!

## Versioning
_Zero_ and _odd_ numbered _major_ versions are considered development versions. _Even_ numbered versions can also be followed by a _release candidate_ number (e.g. `v2.0.0-RCn`).

Though still in pre-release development, Preamble-TS-Core is currently rock-hard stable and is ready to be used in the browser and from the command-line via [NodeJS](https://nodejs.org).

## Run your tests in the browser
Download or clone the [Preamble-TS-Standalone](https://github.com/Preamble-BDD/standalone), which includes everything you need to author and run your tests, all wrapped up in one tidy repo.

## Run your tests from the command-line
See [Preamble-TS-Node](https://github.com/Preamble-BDD/node.runner.reporter), which provides instructions for running Preamble from the command-line.

## What about the original Preamble?
 [The Original Preamble](https://github.com/jeffschwartz/preamble)
 is still available for now but is now deprecated in favor of Preamble-TS-Core. Instructions describing the migration path from Preamble to Preamble-TS-Core is in the works and will be posted here once completed.

## Documentation
It's coming and the link will be posted here.

## How you can contribute:
* Find a bug - issue a pull request or file a new issue report [here](https://github.com/Preamble-BDD/preamble.ts.core/issues)
* Do you want [Karma](https://karma-runner.github.io/0.13/index.html) integration? Issue a pull request.
* Create a new _matchers plugin_ or expand on the _default matchers plugin_.
* Create a new _HTML reporter plugin_ or a new _command-line reporter plugin_.
npm package: @preamble/preamble-ts-node
Description: Command-line, terminal based preamble-ts runner, including reporter.
Author: Jeffrey Schwartz
Latest version: 0.0.17

# Preamble-TS-Node

Command-line, terminal based preamble-ts runner, including reporter.

### Installation
npm install -g @preamble/preamble-ts-node

### Instructions

  Usage: preamble [options]

  Options:

    -h, --help                               output usage information
    -V, --version                            output the version number
    -s, --specs [pathToSpecs]                Path to specs
    -n, --testName [testName]                Name for test [Suite]
    -t, --timeoutInterval [timeoutInterval]  Configuration timeoutInterval
    -q, --shortCircuit [shortCircuit]        Configuration shortCircuit
npm package: @preamp-release-test/core
Description: VideoAmp's Component library
Author: VideoAmp
Latest version: 1.0.41

# PreAmp Core

PreAmp Core in VideoAmp's component library.

## File structure

```bash
core/
  components/
    componentGroup/              #holds all related components
      singleComponent/           #single component
        examples/                #example use cases
        subComponents/           #child components used only by this component
        component.md             #documentation
        component.tsx            #component definition
        component.spec.tsx       #tests
```

## Adding components

-   Component definition
    -   include the description in a comment above the component definition
    -   component should be a named export, not default
-   Props
    -   named with this format `[ComponentName]Props`
    -   include the descriptions in a comment above each prop
-   Examples
    -   include enough examples to show off all use cases for this component
-   Tests
    -   TBD
-   SubComponents
    -   subComponents used only this component should live in `/subComponents`. If a child component is used in multiple places, then it should be pulled out as a stand alone component
-   Types
    -   include only prop interfaces in component definition file
    -   put all other types in `core/types/` for reuse

### Example Component.tsx file

```tsx
import * as React from 'react';

interface ComponentProps {
    /** Description of first prop */
    propOne: string;
    /** Description of the second prop */
    propTwo: boolean
}

/**
 * This is a description of Component.
 */
export const Component: React.SFC<ComponentProps> = (
    props: ComponentProps
): React.ReactElement<any> => {
    ...
};
```

### Note: React must be imported with `* as`. Otherwise this file will not be parsed correctly for documentation generation.

## How to publish

TODO

## Using in another project

import multiple components at once from `@preamp/core`

```js
import { Button, Card, TextField } from '@preamp/core';
```
npm package: @preamp-release-test/rev
Description: VideoAmp's Component library
Author: VideoAmp
Latest version: 1.0.41

# PreAmp Rev

PreAmp components built on material-ui.

## Using in another project

The exposed `ThemeProvider` component should be used at the top level of your
project in order to ensure that the _Rev_ components used within are styled
correctly.

```js
// App.tsx
import { ThemeProvider } from '@preamp/rev';

export const App = () => (
    <ThemeProvider>
        <Component />
    <ThemeProvider/>
);
```

```js
// Component.tsx
import { Button } from '@preamp/rev';

export const Component = () => <Button>Text</Button>;
```

## Adding a component to this package

All that is needed is a file to export the corresponding material-ui component.

```js
// packages/rev/components/components/Button/Button.tsx
export { default as Button } from '@mui/material/Button';
export * from '@mui/material/Button';
```

Styling to match our design language should be done through the `theme`
(`packages/rev/theme.tsx`).

**See:** https://next.material-ui.com/customization/theme-components/

**Note:** Colors may need to be added to the palette used by the theme
(`packages/rev/colors.ts`).

Examples can also be created in the _Documentation_ package.

```js
// packages/documentation/src/rev/examples/components/Button/Button.tsx
import React, { ReactElement } from 'react';

import { Button, ThemeProvider } from '@preamp/rev';

const ButtonExample = (): ReactElement => (
    <ThemeProvider>
        <Button data-ui="button">Text</Button>
    </ThemeProvider>
);

export default ButtonExample;
```

**Note:** Tailwind classes and CSS variables (other than `font-family`s) should
not be used within the _Rev_ package.

## Adding an icon to this package

The SVG content should be exported within a `SvgIcon`. The default `viewBox` for
a `SvgIcon` is 24x24, so all icons should be scaled to this size and should not
specify their own `viewBox` value.

```js
// packages/rev/components/icons/VideoAmp/VideoAmp.tsx
import React, { ReactElement } from 'react';

import { SvgIcon, SvgIconProps } from '../../components/SvgIcon';

export function VideoAmp(props: SvgIconProps): ReactElement {
    return <SvgIcon {...props}>…</SvgIcon>;
}
```

**Note:** Colors should not be defined within the SVG. The current font color
should be inheritable instead.

Examples should also be created in the _Documentation_ package.

```js
// packages/documentation/src/rev/examples/icons/VideoAmp/VideoAmp.tsx
import React, { ReactElement } from 'react';

import { VideoAmp } from '@preamp/rev';

const VideoAmpExample = (): ReactElement => <VideoAmp />;

export default VideoAmpExample;
```
npm package: @preamp/core
Description: VideoAmp's Component library
Author: VideoAmp
Latest version: 1.43.0

# PreAmp Core

PreAmp Core in VideoAmp's component library.

## File structure

```bash
core/
  components/
    componentGroup/              #holds all related components
      singleComponent/           #single component
        examples/                #example use cases
        subComponents/           #child components used only by this component
        component.md             #documentation
        component.tsx            #component definition
        component.spec.tsx       #tests
```

## Adding components

-   Component definition
    -   include the description in a comment above the component definition
    -   component should be a named export, not default
-   Props
    -   named with this format `[ComponentName]Props`
    -   include the descriptions in a comment above each prop
-   Examples
    -   include enough examples to show off all use cases for this component
-   Tests
    -   TBD
-   SubComponents
    -   subComponents used only this component should live in `/subComponents`. If a child component is used in multiple places, then it should be pulled out as a stand alone component
-   Types
    -   include only prop interfaces in component definition file
    -   put all other types in `core/types/` for reuse

### Example Component.tsx file

```tsx
import * as React from 'react';

interface ComponentProps {
    /** Description of first prop */
    propOne: string;
    /** Description of the second prop */
    propTwo: boolean
}

/**
 * This is a description of Component.
 */
export const Component: React.SFC<ComponentProps> = (
    props: ComponentProps
): React.ReactElement<any> => {
    ...
};
```

### Note: React must be imported with `* as`. Otherwise this file will not be parsed correctly for documentation generation.

## How to publish

TODO

## Using in another project

import multiple components at once from `@preamp/core`

```js
import { Button, Card, TextField } from '@preamp/core';
```
npm package: @preamp/rev
Description: VideoAmp's Component library
Author: VideoAmp
Latest version: 1.43.0

# PreAmp Rev

PreAmp components built on material-ui.

## Using in another project

The exposed `ThemeProvider` component should be used at the top level of your
project in order to ensure that the _Rev_ components used within are styled
correctly.

```js
// App.tsx
import { ThemeProvider } from '@preamp/rev';

export const App = () => (
    <ThemeProvider>
        <Component />
    <ThemeProvider/>
);
```

```js
// Component.tsx
import { Button } from '@preamp/rev';

export const Component = () => <Button>Text</Button>;
```

## Adding a component to this package

All that is needed is a file to export the corresponding material-ui component.

```js
// packages/rev/components/components/Button/Button.tsx
export { default as Button } from '@mui/material/Button';
export * from '@mui/material/Button';
```

Styling to match our design language should be done through the `theme`
(`packages/rev/theme.tsx`).

**See:** https://next.material-ui.com/customization/theme-components/

**Note:** Colors may need to be added to the palette used by the theme
(`packages/rev/colors.ts`).

Examples can also be created in the _Documentation_ package.

```js
// packages/documentation/src/rev/examples/components/Button/Button.tsx
import React, { ReactElement } from 'react';

import { Button, ThemeProvider } from '@preamp/rev';

const ButtonExample = (): ReactElement => (
    <ThemeProvider>
        <Button data-ui="button">Text</Button>
    </ThemeProvider>
);

export default ButtonExample;
```

**Note:** Tailwind classes and CSS variables (other than `font-family`s) should
not be used within the _Rev_ package.

## Adding an icon to this package

The SVG content should be exported within a `SvgIcon`. The default `viewBox` for
a `SvgIcon` is 24x24, so all icons should be scaled to this size and should not
specify their own `viewBox` value.

```js
// packages/rev/components/icons/VideoAmp/VideoAmp.tsx
import React, { ReactElement } from 'react';

import { SvgIcon, SvgIconProps } from '../../components/SvgIcon';

export function VideoAmp(props: SvgIconProps): ReactElement {
    return <SvgIcon {...props}>…</SvgIcon>;
}
```

**Note:** Colors should not be defined within the SVG. The current font color
should be inheritable instead.

Examples should also be created in the _Documentation_ package.

```js
// packages/documentation/src/rev/examples/icons/VideoAmp/VideoAmp.tsx
import React, { ReactElement } from 'react';

import { VideoAmp } from '@preamp/rev';

const VideoAmpExample = (): ReactElement => <VideoAmp />;

export default VideoAmpExample;
```