open-index/open-npm huggingface dataset:
npm package: @mars-man/components
Description: mars-man components including inputs and route guards
Author: Marc Frame
Latest version: 1.0.2

![Mars Man Components Logo](./imgs/logo.png)

# Description

Mars Man Components implements common components to be used in a React application

# Table of Contents
1. [Design Overview](#design-overview)
2. [Development](#development)
3. [API Documentation](<#API Documentation>)
3. [Examples](<#Examples>)


# Development
## System Requirements
- Dependencies: 
    - node: >14.15
    - npm:  >6.14
## Commands
```bash
# installation
npm i 

# tests
# run full test suite
`jest`

# run specific test suite
`jest forms.test.ts`

# run specific test 
`jest model.test.ts -t "async true"`

# build
npm run build

# publish
npm publish
```

# API Documentation


# Examples

## Route Guards
```tsx
const Routes = () => {
    return <Router history={history}>
        <Switch>
            // if model is loaded
            <LoadedRoute path='/app' model={model} component={Component}/>
            <AuthedRoute path='/app' component={Component}/>

            <UnauthedRoute path='/login' component={Component}/>
            <UnauthedRoute path='/signup' component={Component}/>
            <UnauthedRoute path='/demo' component={Component}/>
        </Switch>
    </Router>
}
```


## Forms and Inputs
### Basic Form
```tsx
import {Input as MaterialUIInput} from "@material-ui";

const MyForm = () => {
    return <Form form={form}>
        <Input id="name"/>

        // custom Input
        <Input id="name" input={MaterialUIInput}/>
    </Form>
}
```

### Automatic Forms
- if no children are defined the form will automatically define each field
    - using meta data to determine the input types
```tsx
const MyForm = () => {
    return <Form form={form}/>
}
```

### Input Types
- date picker
- textfield
- input 
- number


### Built In Forms
- form has to have fields, `username` and `password`
```tsx
// login form
<LoginForm form={form}/>
```


## Tables
### CRUD Tables
- if the model has a repo called delete it will enable the delete
- if a form is passed, all the members upon the class become editable fields
    - `dropdown=True` will result in the form being
```tsx
<Table model={}>
```
npm package: @mars-man/events
Description: for events
Author: Marc Frame
Latest version: 1.0.3

![Mars Man Events Logo](./imgs/logo.png)

# Description
event emitter built with typescript / esm

# Table of Contents
1. [Design Overview](#design-overview)
2. [Development](#Development)


# Design Overview
... 

# Development
## System Requirements
- Dependencies: 
    - node: >14.15
    - npm:  >6.14
## Commands
```bash
# installation
npm i 

# tests
# run full test suite
`jest`

# build
npm run build

# publish
npm publish
```
npm package: @mars-man/models
Description: for data models, forms and repository pattern
Author: Marc Frame
Latest version: 1.3.15

![Mars Man Models Logo](./imgs/logo.png)

# Description
Data Model / Form / Repository Pattern

# Table of Contents
1. [Design Overview](#design-overview)
2. [Installation](#installation)
3. [API Documentation](<#API Documentation>)
3. [Examples](<#Examples>)

# Development
## System Requirements
- Dependencies: 
    - node: >14.15
    - npm:  >6.14
## Commands
```bash
# installation
npm i 

# tests
# run full test suite
`jest`

# run specific test suite
`jest forms.test.ts`

# run specific test 
`jest model.test.ts -t "async true"`

# build
npm run build

# publish
npm publish
```


# [Form](<./docs/Forms.md>) 
The goal of the form is 
- to use the same DTO object the server expects to validate the input
    - this requires formatting the data to/from frontend and backend data structure
- to abstract 


# [Repo](<./docs/Repos.md>)
Repos are the data sources, implemented with the repository pattern.

They can effectively be any data source (GraphQL, Firestore, Clod Storage...) but as of right now only APIRepo is implemented

# [Models](<./docs/Models.md>)
Models orchestrate the forms and repos


# [Examples](<./docs/Examples.md>)
npm package: @mars-stack/core
Description: Core infrastructure for MARS apps -- auth, database, rate limiting, email, logging, and more.
Latest version: 8.0.17

# @mars-stack/core

Core infrastructure for MARS apps -- auth, database, rate limiting, email, logging, and more.

## Installation

```bash
yarn add @mars-stack/core
```

## What's included

- **Auth** -- Session management (JWE), CSRF protection, password hashing (bcrypt + SHA-256 prehash), input validation
- **Database** -- Prisma proxy with structured error diagnostics
- **Rate limiting** -- Upstash Redis with in-memory fallback
- **Email** -- Provider-agnostic email service (SendGrid, Resend, console)
- **Logger** -- Structured logging via Pino
- **Env** -- Zod-based environment validation with human-readable errors
- **SEO** -- Metadata helpers and JSON-LD generation
- **Test utils** -- Mock factories, request helpers, render utilities

## Usage

```ts
import { checkRateLimit, RATE_LIMITS } from '@mars-stack/core/rate-limit';
import { hashPassword, verifyPassword } from '@mars-stack/core/auth/password';
import { apiSchemas } from '@mars-stack/core/auth/validation';
```

## License

MIT
npm package: @mars-stack/ui
Description: Design-token-driven UI components and styles for MARS apps.
Latest version: 8.0.17

# @mars-stack/ui

Design-token-driven UI components and styles for MARS apps.

## Installation

```bash
yarn add @mars-stack/ui
```

## Components

**Primitives:** Button, Input, Checkbox, Select, Textarea, Badge, Avatar, Spinner, Divider, Table, Text, JsonLd

**Patterns:** Card, Modal, Toast, FormField, EmptyState, PasswordStrengthIndicator

## Styles

Import the full design system in your `globals.css`:

```css
@import 'tailwindcss';
@import '@mars-stack/ui/styles/index.css';
@import './brand.css';
```

Override `--brand-50` through `--brand-950` in `brand.css` to customise your brand colour.

## Usage

```tsx
import { Button, Card, Input, Text } from '@mars-stack/ui';
import { useZodForm } from '@mars-stack/ui/hooks';
```

## License

MIT
npm package: @mars/heroku-js-runtime-env
Description: Runtime env var support for static javascript apps on Heroku
Author: Mars Hall
Latest version: 3.0.2

Heroku JS Runtime Env
=====================
Use runtime environment variables in bundled/minified javascript apps.

[![Build Status](https://travis-ci.org/mars/heroku-js-runtime-env.svg?branch=master)](https://travis-ci.org/mars/heroku-js-runtime-env)
[![npm Module](https://img.shields.io/npm/v/@mars/heroku-js-runtime-env.svg)](https://www.npmjs.com/package/@mars/heroku-js-runtime-env)

Usage
-----

Designed for [create-react-app-buildpack](https://github.com/mars/create-react-app-buildpack). See its documentation to use this module for [Runtime configuration](https://github.com/mars/create-react-app-buildpack/blob/master/README.md#user-content-environment-variables).

Background
-----------

Normally javascript apps are compiled into a bundle before being deployed. During this build phase, environment variables may be embedded in the javascript bundle, such as with [Webpack DefinePlugin](https://webpack.github.io/docs/list-of-plugins.html#defineplugin).

When hosting on a [12-factor](https://12factor.net) platform like [Heroku](https://www.heroku.com), these embedded values may go stale when setting new [config vars](https://devcenter.heroku.com/articles/config-vars) or promoting through a [pipeline](https://devcenter.heroku.com/articles/pipelines).

How Does It Work?
-----------------

When developing your app, use [Runtime environment variables](https://github.com/mars/create-react-app-buildpack/blob/master/README.md#user-content-environment-variables) from **create-react-app-buildpack**.

Then, each time the app starts-up on Heroku, a [`.profile.d` script](https://github.com/mars/create-react-app-inner-buildpack/blob/master/.profile.d/inject_react_app_env.sh) (installed from the buildpack) is executed which fills in a [JSON placeholder](https://github.com/mars/heroku-js-runtime-env/blob/master/index.js#L15) in the JavaScript bundle with the runtime environment variables. The result is 🍃fresh runtime environment variables in the production javascript bundle without recompiling.
npm package: @mars/heroku-nextjs-build
Description: Heroku build adapter for Next.js
Author: Mars Hall
Latest version: 2.0.0

# Heroku Next.js build

Adapter to build [Next.js](https://github.com/zeit/next.js) apps on [Heroku](https://www.heroku.com).

See the example app for [usage instructions](https://github.com/mars/heroku-nextjs).
npm package: @mars/popmotion
Description: The JavaScript motion engine. Create animations and interactions with tweens, physics and input tracking.
Author: Matt Perry
Latest version: 6.3.2-touches.4

# <a href="https://popmotion.io"><img src="https://cloud.githubusercontent.com/assets/7850794/21642571/1910a15e-d27b-11e6-84c7-19e88e207c14.png" height="52" width="243" alt="Popmotion" /></a>

### The JavaScript motion engine.

Create unique animations and interactions with tweens, physics and input tracking.

Popmotion is:
- **Tiny:** At ~9kb, it's 75% smaller than GreenSock.
- **Fast:** Stands up to popular alternatives in [performance tests](http://codepen.io/popmotion/pen/zNYXmR).
- **Compatible:** Full browser support and preloaded with CSS, SVG and SVG path renderers.
- **Composable:** Actions and output functions can be composed to [create complex motion systems](http://codepen.io/popmotion/pen/EZaPxZ).
- **Advanced:** Sophisticated [tween](http://codepen.io/popmotion/pen/wgKpaj) and [color](http://codepen.io/popmotion/pen/dNPVwP) blending for the smoothest possible motion.
- **Powerful:** [Discrete render step scheduling](docs/api/render-loop.md) allows full control over each frame.

[![npm version](https://img.shields.io/npm/v/popmotion.svg?style=flat-square)](https://www.npmjs.com/package/popmotion)
[![npm downloads](https://img.shields.io/npm/dm/popmotion.svg?style=flat-square)](https://www.npmjs.com/package/popmotion)
[![Twitter Follow](https://img.shields.io/twitter/follow/espadrine.svg?style=social&label=Follow)](http://twitter.com/popmotionjs)

[Slack](https://popmotion.slack.com)

## Examples
- ~~Simple tween~~ (Coming soon)
- ~~Bouncing ball with gravity~~ (Coming soon)
- ~~Pointer tracking~~ (Coming soon)
- [Scrolling list with momentum and spring-loaded boundaries](http://codepen.io/popmotion/full/EZaPxZ/)
- [Tween blending](http://codepen.io/popmotion/full/wgKpaj)
- [Color blending](http://codepen.io/popmotion/full/dNPVwP)

### [Full API documentation](docs/api)

## Installation

### npm

In your project root:

```bash
npm install --save popmotion
```

In your javascript module:

```javascript
import { tween } from 'popmotion';
```

### File include

Download `popmotion.global.min.js` from our [GitHub repo](https://github.com/Popmotion/popmotion/tree/master/dist) and include it in your HTML document:

```html
<script src="path/to/popmotion.global.min.js"></script>
```

Popmotion is then available as the global variable `popmotion`.

## Quick start

Creating basic motion like tweens and physics in Popmotion is simple. For example, here's a simple tween that prints its output to the `console`:

```javascript
import { tween } from 'popmotion';

tween({
  to: 100,
  onUpdate: (v) => console.log(v)
}).start();
```

To use that tween to move an actual DOM element, we can create a CSS renderer.

```javascript
const ballRenderer = css(document.getElementById('ball'));

tween({
  to: 100,
  onUpdate: (v) => ballRenderer.set('x', v)
}).start();
```

### [Full API documentation](docs/api)