open-index/open-npm huggingface dataset:
npm package: @lewispour/iphone
Description: <a href="https://iphone.junho.io">   <img src="https://iphone.junho.io/og-image.jpg" /> </a>
Author: Lewis Pour
Latest version: 2.0.3

<a href="https://iphone.junho.io">
  <img src="https://iphone.junho.io/og-image.jpg" />
</a>

<p align="center">
  <h1 align="center">
    @junhoyeo/iphone
  </h1>
</p>

<p align="center">
  <a href="https://iphone.junho.io">
    <img alt="GitHub deployments" src="https://img.shields.io/github/deployments/junhoyeo/iphone/production?color=%23000000&label=deploy&logo=Vercel&logoColor=white&style=for-the-badge&labelColor=000" />
  </a>
   <a aria-label="NPM version" href="https://www.npmjs.com/package/@junhoyeo/iphone">
    <img alt="" src="https://img.shields.io/npm/v/@junhoyeo/iphone.svg?style=for-the-badge&labelColor=000000">
  </a>
  <a href="https://opensource.org/licenses/MIT">
    <img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-brightgreen.svg?style=for-the-badge&labelColor=000" />
  </a>
</p>

## 🏴‍☠️ @junhoyeo/iphone

> 🏝️ iPhone 14 Pro with dynamic island, on the web.

> **Warning**<br/>
> This package is under rapid development 🛠

```bash
yarn add @junhoyeo/iphone
```

```tsx
import { Phone, type GridItemProps } from '@junhoyeo/iphone';

import '@junhoyeo/iphone/dist/style.css';

const APPS: GridItemProps[] = [];
const DOCK: GridItemProps[] = [];
const BACKGROUND_IMAGE_URL: string = '';

<Phone
  appBarBrightness="dark"
  frameColor="purple"
  transformScale={1}
  apps={APPS}
  dock={DOCK}
  backgroundImage={BACKGROUND_IMAGE_URL}
  dynamicIslandProps={{ ... }}
>
  <AppBar />
  <Screen>
    <Iframe src="/demo" allowTransparency />
  </Screen>
</Phone>
```

- **Special thanks to Sunghyun Cho([@anaclumos](https://github.com/anaclumos))! The implementation of Dynamic Island was made possible by his work.**
- If you found this project interesting, please consider following me([GitHub](https://github.com/junhoyeo)/[Twitter](https://twitter.com/_junhoyeo)) or [⭐️ giving it a star](https://github.com/junhoyeo/iphone/stargazers).

## Powered by

<p align="center">
  <a href="https://vitejs.dev">
    <img alt="Vite" src="https://camo.githubusercontent.com/61e102d7c605ff91efedb9d7e47c1c4a07cef59d3e1da202fd74f4772122ca4e/68747470733a2f2f766974656a732e6465762f6c6f676f2e737667" height="82px" />
  </a>
</p>

- [Fork](https://github.com/junhoyeo/dynamic-island) of [anaclumos/dynamic-island](https://github.com/anaclumos/dynamic-island)
- [picturepan2/devices.css](https://github.com/picturepan2/devices.css)

## Powers

- [junhoyeo/junho.io](https://github.com/junhoyeo/junho.io)
npm package: @lewistg/base64-vlq-codec
Description: This is a minimalist library for decoding and encoding base64 VLQs. This repository is also a companion to this [blog post](https://www.lucidchart.com/techblog/2019/08/22/decode-encoding-base64-vlqs-source-maps/), which also explains base64 VLQs.
Author: Ty G. Lewis
Latest version: 0.1.1

# Base64 VLQ Codec

This is a minimalist library for decoding and encoding base64 VLQs. This
repository is also a companion to this [blog
post](https://www.lucidchart.com/techblog/2019/08/22/decode-encoding-base64-vlqs-source-maps/), which also explains base64 VLQs.

## Usage

In TypeScript:

```TypeScript
import {base64VlqEncode, base64VlqDecode} from '@lewistg/base64-vlq-codec';

base64VlqEncode([1776, -2387, 2121809, 8, 1820, -8121988]); // 'gvDn1EilwhEQ4xDpo3vP'

base64VlqDecode('uDt7D0TkuK'); // [55, -1974, 314, 5346]
```

## Installation

```
$ npm install --save-dev '@lewistg/base64-vlq-codec'
```
npm package: @lewistg/min-js-annotator
Description: Command line tool for annotating generated JavaScript (e.g., minified JavaScript) with source mappings
Author: Ty Lewis
Latest version: 0.1.3

Command line tool for annotating generated JavaScript (e.g., minified JavaScript) with source mappings.

Here is the tool's usage statement:

    Usage: min-js-annotator [options...] FILE
    -h, --help Outputs this help text
    -s, --original-source-root DIRECTORY Overrides "sourceRoot" property in the source map
    -m, --source-map FILE Overrides the file in the minified file's "//# sourceMappingURL" comment

The tool outputs to standard output the HTML for a self-contained page that
renders the input JavaScript file that's been annotated with source mappings.
npm package: @lewn/ng-dynamic-form-builder
Description: > This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 19.0.3.
Latest version: 0.0.8

# Angular Form Dynamic Builder

> This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 19.0.3.

This library is designed to simplify form creation in Angular applications. It includes components that allow users to create and customize dynamic forms.

[StackBlitz Demo](https://stackblitz.com/edit/lewn-ng-dynamic-form-builder?file=src%2Fapp%2Fapp.component.ts)

Bug report discord: letmegolol

## Installation
```
$ npm i @lewn/ng-dynamic-form-builder
```

## Usage

### Import the library
```typescript
import { DynamicFormComponent } from '@lewn/ng-dynamic-form-builder';
```
### Standole or NgModule
```typescript
imports: [DynamicFormBuilderComponent]
```

### Define the Dynamic form
Create your custom form model using the DynamicFormComponent. This model defines the structure and behavior of your dynamic form:
```typescript
import { DynamicFormComponent } from '@lewn/ng-dynamic-form-builder';
```

```typescript
model!: any;

dynamicForm: DynamicFormComponent[] = [
  {
    value: 'FirstName',
    label: 'First Name',
    components: 'input',
    size: 50,
  }
];
```

### Template Integration(.html)
In your HTML template, use the <dynamic-form-builder> component and bind the model and customForm input to create the dynamic form:
```html
<dynamic-form-builder [(model)]="model" [(customForm)]="dynamicForm"></dynamic-form-builder>
```
npm package: @lewnelson/grpc-ts
Description: Opinionated gRPC TypeScript client tooling with a modern interface
Author: Lewis Nelson
Latest version: 1.1.1

# @lewnelson/grpc-ts

This library is an abstraction on [@grpc/grpc-js](https://github.com/grpc/grpc-node/tree/master) to provide a simpler interface for making requests from a gRPC client and generating fully typed gRPC clients from `.proto` files.

Go from this:

```typescript
client.getName(new GetNameRequest(), (error: Error | null, response: GetNameResponse | undefined) => {
  // handle response in callback
});
```

to this:

```typescript
const response = await client.getName(new GetNameRequest());
```

## Install

Ensure you also install `@grpc/grpc-js` as a peer dependency.

```bash
npm install @lewnelson/grpc-ts @grpc/grpc-js@^1.8.4
```

## Usage

### Generating clients

Recursively search `./path/to/protos` directory for `.proto` files and generate the output to `./path/to/output` directory.

```bash
npx grpc-ts generate ./path/to/protos ./path/to/output
```

Generating clients from a single `.proto` file.

```bash
npx grpc-ts generate ./path/to/protos/file.proto ./path/to/output
```

Generating clients from proto files, but not searching recursively.

```bash
npx grpc-ts generate --no-recursive ./path/to/protos ./path/to/output
```

The generator uses [grpc-tools](https://github.com/grpc/grpc-node/tree/master/packages/grpc-tools) to generate both TypeScript types and JavaScript code.

### Creating a client

```typescript
import * as grpc from "@grpc/grpc-js";
import { GeneratedClient } from "./path/to/output/generated/client";

// Creating a client with insecure credentials
const client = new GeneratedClient("localhost:50051");

// Creating a client with SSL credentials
const client = new GeneratedClient(
  "localhost:50051",
  { credentials: grpc.credentials.createSsl() }
);

```

For full usage see [Examples](./examples/README.md).