open-index/open-npm huggingface dataset:
npm package: @porthole.dev/cli
Description: Fast localhost tunneling for developers
Latest version: 0.4.0

# porthole.dev CLI

Fast localhost tunneling for developers.

## Quick Start

```bash
npx @porthole.dev/cli 3000
```

## Usage

```bash
porthole <port> [--qr] [--name <name>] [--password <password>] [--verbose] [--no-telemetry]
```

### Examples

```bash
# Start a tunnel
npx @porthole.dev/cli 3000

# Request a custom subdomain
npx @porthole.dev/cli 3000 --name demo-api

# Password protect a tunnel
npx @porthole.dev/cli 3000 --password "demo123"

# Show QR code on start
npx @porthole.dev/cli 3000 --qr
```

## Docs

Full documentation: https://porthole.dev/docs
npm package: @portholeship/genesis
Description: genesis design system
Author: gobolt
Latest version: 0.0.7

# GENESIS Design System

![Rating](https://img.shields.io/badge/rating-5%2F5-brightgreen) ![License](https://img.shields.io/badge/license-MIT-green)

[Storybook hosted on Google Cloud](https://genesis-storybook-365607811897.us-central1.run.app/?path=/docs/genesis-design-system-design-tokens-color-tokens--docs)

The GENESIS design system standardizes our colors, fonts, and sizing tokens across all our apps. 

It unifies frontend app development around these core libraries:

- [Antd](https://ant.design/) v5
- [Styled Components](https://styled-components.com/) v5
- [Typescript](https://www.typescriptlang.org/) v5
- [React](https://react.dev/) v18

This library is intended to be universally imported into both React & React-Native apps.

## 📦 Development

```bash
pnpm install
pnpm start
```

To scaffold a new component, run `pnpm generate` and follow the prompts

## 🔨 Usage

Install the GENESIS library

```
pnpm install @second-closet/genesis
```

The `GenesisProvider` must included within the application as it supplies the Genesis Theme. 

```jsx
import { Button, GenesisProvider } from '@gobolt/genesis';

const Demo = () = {

    const onClick = (value) => {
        console.log("Genesis button clicked with value: ", value);
    }

    return (
        <GenesisProvider>
            <Button onClick={onClick}>Ship</Button>
        </GenesisProvider>
    )
 };
```

The library exports both the components and their types which are documented in our storybook.

## 🧪 Testing

```
pnpm test 
```

[husky](https://typicode.github.io/husky/) has been configured to automatically run the tests on push to Github and will enforce that all tests pass.  

## 🚀 Publishing 

This project uses [rollup](https://rollupjs.org/) to create the package and [changesets](https://github.com/changesets/changesets) to manage it's versions. We only need to run changesets when we're ready to release and publish the library.

```
npx changeset
npx changeset version
npm publish
```

## 📙 Storybook Deployment to Google Cloud

```
just deploy
```

See the .justfile which simplifies this [Storybook GCP script on Notion](https://www.notion.so/gobolt/Deploy-Genesis-Storybook-to-GCP-1759f4303960806e8d88cf1e751cb19d).

requires: [just](https://github.com/casey/just) 

```
brew install just
```
npm package: @portify/expo-mixpanel-analytics
Description: Mixpanel integration for use with React Native apps built on Expo.
Author: CodeKadiya
Latest version: 0.0.8

Expo Mixpanel Analytics
=========

Original repo @codekadiya/expo-mixpanel-analytics is no longer maintained, so I've compiled all open PRs into this library.

Mixpanel integration for use with React Native apps built on Expo.

## Installation

```
npm install expo-mixpanel-analytics --save
```

## Import

Your React Native app's screen resolution, app name, app ID, app version, device information and multiple other parameters will be automatically resolved and sent with each event.
```
import ExpoMixpanelAnalytics from 'expo-mixpanel-analytics';
```

## Usage
```
const analytics = new ExpoMixpanelAnalytics("5224da5bbbed3fdeaad0911820f1bf2x");

analytics.identify("13793");

analytics.track("Signed Up", { "Referred By": "Friend" });

analytics.people_set({ "$first_name": "Joe", "$last_name": "Doe", "$email": "joe.doe@example.com", "$created": "2013-04-01T13:20:00", "$phone": "4805551212", "Address": "1313 Mockingbird Lane", "Birthday": "1948-01-01" });

analytics.people_set_once({ "First login date": "2013-04-01T13:20:00" });

analytics.people_unset([ "Days Overdue" ]);

analytics.people_increment({ "Coins Gathered": 12 });

analytics.people_append({ "Power Ups": "Bubble Lead" });

analytics.people_union({ "Items purchased": ["socks", "shirts"] });

analytics.people_delete_user();

analytics.reset();

```

## References
https://mixpanel.com/help/reference/http
npm package: @portinova/front-end-components
Description: Front-end components for the admin dashboard live here.
Author: Portinova Data Team
Latest version: 0.1.7

Front-end components for the admin dashboard live here.

Goals:
- Centralize reusable UI/chart utilities used by pages like `index.md`.
- Provide small, documented APIs with sensible defaults.
- Keep callsites stable where possible during incremental refactors.

Conventions:
- Use ES modules.
- Prefer clear names with underscores for file names (e.g., `years_plot.js`).
- Add concise JSDoc for exported functions.
npm package: @portion/eslint-config-basic
Description: basic eslint config
Author: Ali Majed
Latest version: 0.0.7

## Install

```
$ npm install @portion/eslint-config-basic eslint --save-dev
```

## Usage

```json
// ./eslintrc.json

{
    "extends": [
        "@portion/eslint-config-basic",
    ]
}
```
npm package: @portion/eslint-config-prettier
Description: eslint config for prettier
Author: Ali Majed
Latest version: 0.0.7

## Install

### NPM

```
$ npm install @portion/eslint-config-prettier eslint prettier --save-dev
```

## Usage

Make sure that @portion/eslint-config-prettier is the last value in the array

```json
// ./eslintrc.json

{
    "extends": [
        "other-package-a",
        "other-package-b",
        "@portion/eslint-config-prettier",
    ]
}
```
npm package: @portion/eslint-config-react
Description: eslint for the web
Author: Ali Majed
Latest version: 0.0.7

## Install

```
$ npm install @portion/eslint-config-react eslint --save-dev
```

## Usage

```json
// ./eslintrc.json

{
    "extends": [
        "@portion/eslint-config-react",
    ]
}
```
npm package: @portion/web-tsconfig
Description: tsconfig for the web
Author: Ali Majed
Latest version: 0.0.7

## Install

```
$ npm install @portion/web-tsconfig typescript --save-dev
```

## Usage

```json
// ./tsconfig.json

{
    "extends": "@portion/web-tsconfig",
    "compilerOptions": {
        "outDir": "./dist/"
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules", "**/*.spec.ts"]
}
```
npm package: @portis/web3
Description: Portis Web3 SDK
Latest version: 4.0.7

<p align="center">
  <a href="https://portis.io/" target="_blank">
    <img alt="Portis" src="https://s3.amazonaws.com/portis-prod/assets/portis-logo/logo_with_name_medium.png" width="749">
  </a>
</p>

![](https://img.shields.io/npm/v/@portis/web3.svg?colorB=blue&style=flat)
![](https://img.shields.io/badge/chat-telegram-blue.svg)
[![Twitter](https://img.shields.io/badge/twitter-portis-blue.svg?style=flat)](https://twitter.com/portis_io)
[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/portis-project/web-sdk/blob/master/LICENSE.txt)
![](https://img.shields.io/github/stars/portis-project/web-sdk.svg?style=flat)

* ⚗️ [demo](https://codesandbox.io/s/l9mn6o89qm)
* 📕 [docs](https://docs.portis.io)
* 💬 [chat](https://t.me/portisHQ)

## Quick Start

It should take no more than 5 minutes to get started with Portis 🚀

1. Register a DApp in the [Portis Dashboard](https://dashboard.portis.io), and copy your DApp ID.

1. Install Portis and Web3

   ```shell
   npm install @portis/web3 web3
   ```

1. Import and initialize a web3 instance

   ```javascript
   import Portis from '@portis/web3';
   import Web3 from 'web3';

   const portis = new Portis('YOUR_DAPP_ID', 'mainnet');
   const web3 = new Web3(portis.provider);
   ```

1. Verify everything works by calling a web3 method such as getAccounts:

   ```javascript
   web3.eth.getAccounts((error, accounts) => {
     console.log(accounts);
   });
   ```

1. You are good to go! 👍

For more information see our [docs](https://docs.portis.io) 📕

## License

MIT
npm package: @portive/auth
Description: A library to help generate auth tokens for use with Portive's cloud services for open source components
Author: Sunny Hirai
Latest version: 9.0.0

# @portive/auth

To use the Portive Client or a Portive enabled component like **Slate Cloud**, **Plate Cloud** or **Wysimark Cloud**, you must provide an **API key** or an **Auth Token** (which is generated from an API Key) to the component.

Using the API Key directly is an easier way to start and is great for development. Using an auth token is more secure but takes a little more work to setup.

This library lets you generate Auth Tokens from a Portive API Key.
npm package: @portive/client
Description: Client to connect to and use Portive's cloud services for open source components
Latest version: 10.0.3

# @portive/client

## Usage

```typescript
import { creatAuthToken } from "@portive/auth"
import { Client, uploadFile } from "@portive/client"

const authToken = createAuthToken(API_KEY, {
  path: "on/$yyyy/$mm/$dd",
  expiresIn: "1h",
})

const client = new Client({ authToken, apiOrigin })

const uploadResult = await uploadFile({
  client,
  file,
  onProgress(e) {
    console.log(e)
  },
})
```

## Design Strategy

- Separate auth and client: Keep `@portive/auth` separate from `@portive/client` because once we've developed a component, we don't need to import `@portive/client` explicitly anymore.
- `authToken` option always provided on Component: When a Component is created that uses Portive, it needs to take `authToken` as part of its arguments. It is not necessary to take `apiOrigin` because that is only required if you aren't hitting the production endpoint. When an end-developer uses the Component, they will likely never be hitting a non-production endpoint.
- Don't pass in Client to Component: Because `authToken` is the only necessary argument, we don't ask the Component user to pass in a Client. It's an unnecessary extra step.
- Do have a `Client` object though. That being said, we do have a `Client` object that needs to be created. We have this because it helps the Component developer in these ways:
  1. It's obvious what options should be passed in to the Component. It is all the options on the `Client` object. For example, it takes `authToken` but taking an `apiOrigin` as optional and perhaps a `path` as optional will be really helpful as well.
  2. By forcing the Component developer to create a Client object, it will be more likely that the Component developer will create the Client object during the initialization phase and then all the options will be passed properly whenever an API call is made. For example, let's say we have the `uploadFile` call but also a `collaborate` call. We don't want to introduce an error like forgetting to pass the `apiOrigin` to `collaborate` even though we've passed it through to `uploadFile`. After using the options to create a new `Client`, we don't have to worry about forgetting to pass through correct options through.
npm package: @portive/date-json
Description: A lightweight (794 bytes) library to add Date support to JSON.
Author: Sunny Hirai
Latest version: 1.0.4

# DateJson

A lightweight (794 bytes) library to add Date support to JSON APIs.

Enables APIs to send database records that contain dates without having to manually transform them.

```ts
import { DateJson } from "@portive/date-json"

const json = DateJson.toJSON({ createdAt: new Date() })
// --> { createdAt: { $date: 1519211811670 } }

const jsonWithDates = DateJson.fromJSON(json)
// --> { createdAt: anInstanceOfADateObject }
```

## Features

- Lightweight: 795 bytes
- JSON: Transform to/from JSON
- String: Transform to/from string (stringify/parse)
- TypeScript: Keeps type integrity through transformations

## TypeScript

Keeps type integrity during encode/decode enabling type safety in API calls.

```ts
const json = DateJson.toJSON({ createdAt: new Date() })
// --> { createdAt: { $date: 1519211811670 } }
type MyJson = typeof json
// --> type: { createdAt: { $date: number }}

const jsonWithDates = DateJson.fromJSON(json)
// --> { createdAt: anInstanceOfADateObject }
type MyJsonWithDates = typeof jsonWithDates
// --> type: { createdAt: Date }
```

## No `$date` Key Allowed

The key `$date` is prohibited in `toJSON` like in `DateJson.toJSON({ $date: 'today' })`. This throws the error `Object with key $date is invalid`.

The design is intentional and is there to prevent confusion. Am I looking at a DateJson object or a plain JSON object with `$date` in it?
npm package: @portive/jwt-utils
Description: JWT Utilities for use with Portive
Latest version: 1.0.7

# portive/jwt-utils

A set of simple utility functions for working with JSON Web Tokens.

Used, for example, to create auth tokens in `portive/auth` and in the Portive admin website.

Typically you wouldn't use this directly. Developers integrating with Portive should use:

- The library built specifically for the open source component
- @portive/client to talk directly to the Portive API
- @portive/auth to create Auth Tokens