open-index/open-npm huggingface dataset:
npm package: @ismaelmoreiraa/vision-camera-code-scanner
Description: VisionCamera Frame Processor Plugin to read barcodes using MLKit Vision Barcode Scanning
Author: Ismael Sousa
Latest version: 3.0.1

# vision-camera-code-scanner

## using vision camera v4

VisionCamera Frame Processor Plugin to read barcodes using MLKit Vision Barcode Scanning

## Installation

```sh
yarn add vision-camera-code-scanner
```

make sure you correctly [setup](https://github.com/chrfalch/react-native-worklets) react-native-worklets and insert as a first line of your [`index.tsx`](https://github.com/rodgomesc/vision-camera-code-scanner/blob/1409a8afd02328a26e336036493b2d6ef8441359/example/index.tsx#L1)

```sh
import "react-native-worklets/src";
```

Add this to your `babel.config.js`

```
["react-native-worklets/plugin"],
```

## Usage

Simply call the `useScanBarcodes()` hook or call `scanBarcodes()` inside of the `useFrameProcessor()` hook. In both cases you will need to pass an array of `BarcodeFormat` to specify the kind of barcode you want to detect.

> Note: The underlying MLKit barcode reader is only created once meaning that changes to the array will not be reflected in the app.

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

import { StyleSheet, Text } from 'react-native';
import { useCameraDevices } from 'react-native-vision-camera';
import { Camera } from 'react-native-vision-camera';
import { useScanBarcodes, BarcodeFormat } from 'vision-camera-code-scanner';

export default function App() {
  const [hasPermission, setHasPermission] = React.useState(false);
  const devices = useCameraDevices();
  const device = devices.back;

  const [frameProcessor, barcodes] = useScanBarcodes([BarcodeFormat.QR_CODE], {
    checkInverted: true,
  });

  // Alternatively you can use the underlying function:
  //
  // const [barcodes, setBarcodes] = React.useState<Barcode[]>([]);
  // const setBarcodesJS = Worklets.createRunInJsFn(setBarcodes);
  //
  // const frameProcessor = useFrameProcessor((frame) => {
  //   'worklet';
  //   const detectedBarcodes = scanBarcodes(frame, [BarcodeFormat.ALL_FORMATS], {
  //     checkInverted: true,
  //   });
  //   setBarcodesJS(detectedBarcodes);
  // }, []);

  React.useEffect(() => {
    (async () => {
      const status = await Camera.requestCameraPermission();
      setHasPermission(status === 'authorized');
    })();
  }, []);

  return (
    device != null &&
    hasPermission && (
      <>
        <Camera
          style={StyleSheet.absoluteFill}
          device={device}
          isActive={true}
          frameProcessor={frameProcessor}
          frameProcessorFps={5}
        />
        {barcodes.map((barcode, idx) => (
          <Text key={idx} style={styles.barcodeTextURL}>
            {barcode.displayValue}
          </Text>
        ))}
      </>
    )
  );
}

const styles = StyleSheet.create({
  barcodeTextURL: {
    fontSize: 20,
    color: 'white',
    fontWeight: 'bold',
  },
});
```

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT
npm package: @ismaelmoreiraa/vision-camera-ocr
Description: VisionCamera Frame Processor Plugin to provide OCR support
Author: Ismael Sousa
Latest version: 3.0.2


# vision-camera-ocr

A [VisionCamera v4](https://github.com/mrousavy/react-native-vision-camera) Frame Processor Plugin to preform text detection on images using [**MLKit Vision** Text Recognition](https://developers.google.com/ml-kit/vision/text-recognition).

<img style='width:200px;' src="docs/demo.gif">

## Installation

```sh
yarn add vision-camera-ocr
cd ios && pod install
```

Add the plugin to your `babel.config.js`:

```js
module.exports = {
   plugins: [['react-native-worklets-core/plugin']],
    // ...
```

> Note: You have to restart metro-bundler for changes in the `babel.config.js` file to take effect.

## Usage

```js
import {scanOCR} from 'vision-camera-ocr';

// ...
const frameProcessor = useFrameProcessor((frame) => {
  'worklet';
  const scannedOcr = scanOCR(frame);
}, []);
```

## Data

`scanOCR(frame)` returns an `OCRFrame` with the following data shape. See the example for how to use this in your app.

 ``` jsx
  OCRFrame = {
    result: {
      text: string, // Raw result text
      blocks: Block[], // Each recognized element broken into blocks
    ;
};
```

The text object closely resembles the object documented in the MLKit documents.
<https://developers.google.com/ml-kit/vision/text-recognition#text_structure>

```
The Text Recognizer segments text into blocks, lines, and elements. Roughly speaking:

a Block is a contiguous set of text lines, such as a paragraph or column,

a Line is a contiguous set of words on the same axis, and

an Element is a contiguous set of alphanumeric characters ("word") on the same axis in most Latin languages, or a character in others
```

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT
npm package: @ismaelrodino/ui-lib
Description: Minimal React Setup with strict CSP and suomifi-ui-components, served by express
Latest version: 1.0.4

# Minimal React Setup + express

Minimal React Setup to run suomifi-ui-components in strict CSP with the help of nonce, served by express.

## ⚡️ Quick Start

- To install required dependencies, build and serve it: `yarn start:fresh`
- Open your browser at `localhost:3123`.

## ✨ Features

- [ejs](https://github.com/mde/ejs) template to pass the nonce **from server** to client side
- Strict Content-Security-Policy
- [suomifi-ui-components](https://github.com/vrk-kpa/suomifi-ui-components)
- [uuid](https://github.com/uuidjs/uuid), for generating nonce
- [helmet-csp](https://github.com/helmetjs/csp), adding nonce to Response Headers

##  ❗️Disclaimer

This is not the prettiest way of doing this, but this is just a **P**roof **O**f **C**oncept.

## 🚔 Content-Security-Policy

[Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) is set to be quite finicky and not allowing too much.

Here are the Content Security Policy from **Response Headers**:

```
Content-Security-Policy: default-src 'none'; base-uri 'self'; object-src 'none'; script-src 'self' 'nonce-xxx'; style-src 'self' 'nonce-xxx'; font-src 'self' data:; connect-src 'self'; img-src 'self'
```

This is done with helmet-csp.

You can read more about the CSP from their docs: https://helmetjs.github.io/docs/csp/

### 🚪 nonce

In the *Content-Security-Policy* above, the _nonce-xxx_ has the **xxx** replaced with the generated value by the server.

###  🧱ejs

`<?=nonce?>` value in the meta-tag is replaced by the template engine, ejs, on the express's side.

###  💄styled-components

As styled-components needs the *nonce* for it's style it does need the `__webpack_nonce__`to be set. This is currently done in **create-nonce.js**. 

As you can see, the nonce is read from the meta-tag, named **nonce**. 

## 📄 Licensing

MIT [LICENSE](/LICENSE)
npm package: @ismaelvega/trace-otdr-ui
Description: UI components and utilities for OTDR SOR data
Latest version: 1.1.0

# @ismaelvega/trace-otdr-ui

TypeScript + React OTDR component library for visualizing `sor-reader` results.

## Install

```bash
npm install @ismaelvega/trace-otdr-ui sor-reader react react-dom
```

## Quick Start

```tsx
import { TraceViewer } from "@ismaelvega/trace-otdr-ui";
import "@ismaelvega/trace-otdr-ui/css";

function App({ result }) {
  return <TraceViewer result={result} />;
}
```

## CSS Themes

- `@ismaelvega/trace-otdr-ui/css` — default light theme
- `@ismaelvega/trace-otdr-ui/css/dark` — dark tokens
- `@ismaelvega/trace-otdr-ui/css/telecom` — telecom preset

Set the theme with `data-theme`:

```html
<div data-theme="dark"></div>
```

## Major Exports

- `TraceViewer`, `TraceChart`, `TraceSummary`, `EventTable`, `FiberMap`, `LossBudgetChart`
- `TraceComparison`, `TraceReport`, `SorDropZone`, `PrintButton`
- Hooks: `useZoomPan`, `useEventSelection`, `useTraceData`, `useThresholds`
- Utilities: formatters, conversions, classifiers, loss budget, downsampling, image export
- Web components entry: `@ismaelvega/trace-otdr-ui/web-components`

## Web Components

```js
import "@ismaelvega/trace-otdr-ui/web-components";

const viewer = document.querySelector("otdr-trace-viewer");
viewer.data = result;
```

## Browser Support

Modern evergreen browsers with Canvas2D and Custom Elements support.
npm package: @ismaelvsqz/angular-form-message
Description: Angular From Message provides a extension for the native Reactive Form allowing the user include errors messages
Author: Juan Ismael Vasquez
Latest version: 0.1.2

# angular-form-message

## Installation

To install this library, run:

```bash
$ npm install angular-form-message --save
```

## Consuming your library

You can import the library in any Angular application by running:

```bash
$ npm install angular-form-message
```

and then from your Angular `AppModule`:

```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import { FormMessageModule } from 'angular-form-message';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    FormMessageModule.forRoot()
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
```
## Sample

You can see a simple example below:

```typescript
import { Component } from '@angular/core';
import { FormGroup, Validators } from '@angular/forms';
import { FormMessageBuilder } from '@ismaelvsqz/angular-form-message';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {

  form: FormGroup;

  constructor(
    private fb: FormMessageBuilder
  ) {
    this.createForm();
  }

  createForm() {
    this.form = this.fb.group({
      name: ['',
        [Validators.required, Validators.minLength(3), Validators.maxLength(6)],
        null,
        {
          required: 'The name is required',
          minlength: 'The min length is 3',
          maxlength: 'The max length is 6'
        }]
    });
  }
}
```

To show the messages, you can use the message property.

```html
<div>
  <form [formGroup]="form" novalidate>
    <div>
      <label for="name">Name</label>
      <input id="name" type="text" formControlName="name" />
      <div *ngIf="form.get('name').message">{{form.get('name').message}}</div>
    </div>
  </form>
</div>
```

## Development

To generate all `*.js`, `*.js.map` and `*.d.ts` files:

```bash
$ npm run tsc
```

To lint all `*.ts` files:

```bash
$ npm run lint
```

## License

MIT © [Juan Ismael Vasquez](mailto:ismael.juan@gmail.com)