open-index/open-npm huggingface dataset:
npm package: @janarendvw/spotlight
Description: A simple spotlight effect for your web app
Author: Jan Arend van winsen
Latest version: 2.2.0

# spotlight
package that can be used to create quick spotlight-like tutorials for your web interfaces


## installation

#### npm
`npm i @janarendvw/spotlight`

#### yarn
`yarn add @janarendvw/spotlight`

#### pnpm
`pnpm add @janarendvw/spotlight`

## usage

#### Add elements to the spotlight tour

```html
<div data-spotlight>{...}</div>
```

#### Add a description to the element

```html
<div data-spotlight data-spotlight-description="This is a clickable div element.">{...}</div>
```

#### Order your elements in the spotlight tour

```html
<div data-spotlight data-spotlight-order="1">{...}</div>
<div data-spotlight data-spotlight-order="2">{...}</div>
<div data-spotlight data-spotlight-order="3">{...}</div>
```
npm package: @janario/cpf
Description: Validate, generate and format CPF numbers. fork https://github.com/fnando/cpf/pull/5 
Author: Nando Vieira
Latest version: 0.1.0-beta.2

# fork [PR](https://github.com/fnando/cpf/pull/5)

# CPF

[![Build Status](https://travis-ci.org/fnando/cpf.svg?branch=master)](https://travis-ci.org/fnando/cpf)
[![NPM package version](https://img.shields.io/npm/v/@fnando/cpf.svg)](https://www.npmjs.com/package/@fnando/cpf)
![License: MIT](https://img.shields.io/npm/l/@fnando/cpf.svg)
![Minified size](http://img.badgesize.io/fnando/cpf/master/dist/cpf.min.js.svg?label=cpf+min+size)
![Minified+Gzip size](http://img.badgesize.io/fnando/cpf/master/dist/cpf.min.js.svg?compression=gzip&label=cpf+min%2Bgzip+size)

This package does some [CPF](http://en.wikipedia.org/wiki/Cadastro_de_Pessoas_F%C3%ADsicas) magic. It allows you to create, validate and format CPF documents.

**HINT:** Check out the CNPJ counter part available at <https://github.com/fnando/cnpj>.

## Installation

This lib is available as a NPM package. To install it, use the following command:

```
npm install @fnando/cpf --save
```

If you're using Yarn (and you should):

```
yarn add @fnando/cpf
```

## Usage

```js
import * as cpf from "@fnando/cpf"; // import the whole library
import { isValid as isValidCpf } from "@fnando/cpf"; // import just one function

// import via <script>; the lib will available as window.cpf
// <script src="cpf.js"></script>

cpf.isValid("532.820.857-96");
//=> true

cpf.isValid("53282085796");
//=> true

cpf.strip("532.820.857-96");
//=> 53282085796

cpf.format("53282085796");
//=> 532.820.857-96

cpf.generate(true); // generate formatted number
//=> 838.684.734-40

cpf.generate(); // generate unformatted number
//=> 72777632898
```

### Strict Validation

By default, validations will strip any characters you provide. This means that the following is valid, because only numbers will be considered:

```js
cpf.isValid("101#688!!!!!!542......36");
//=> true

cpf.strip("101#688!!!!!!542......36");
//=> 10168854236
```

If you want to strict validate strings, use the following signature:

```js
cpf.isValid(number, strict);
```

The same example would now return `false`:

```js
cpf.isValid("101#688!!!!!!542......36", true);
//=> false
```
npm package: @janblazej/eslint-config-react-native
Description: Opinionated ESLint config for React Native projects with TypeScript, Prettier, accessibility, and import sorting support.
Author: Jan Blazej
Latest version: 0.1.2

# eslint-config-react-native

A comprehensive ESLint configuration for React Native projects, with TypeScript, Prettier, accessibility, and import sorting support. Built for consistency, best practices, and ease of use.

## Features

- Extends recommended ESLint and TypeScript rules
- Integrates Prettier for code formatting
- Enforces React and React Hooks best practices
- Accessibility linting via `eslint-plugin-jsx-a11y`
- Import sorting and key sorting
- Sensible defaults for modern React Native development

## Installation

First, install this config and its peer dependencies:

```sh
yarn add -D @janblazej/eslint-config-react-native
```

### Peer & Required Dependencies

You must also have the following packages installed (they will be installed automatically if you use the above command):

```sh
yarn add -D \
  eslint \
  prettier \
  typescript \
  @typescript-eslint/eslint-plugin \
  @typescript-eslint/parser \
  eslint-plugin-react \
  eslint-plugin-react-hooks \
  eslint-plugin-jsx-a11y \
  eslint-plugin-prettier \
  eslint-config-prettier \
  eslint-plugin-simple-import-sort \
  eslint-plugin-unused-imports \
  eslint-plugin-sort-keys-fix \
  @eslint/js
```

## Usage

In your project root, create (or update) your ESLint config file (e.g. `.eslintrc.js`, `.eslintrc.json`, or `eslint.config.js`) to extend this config:

### For `eslint.config.js` (recommended for ESLint v9+):

```js
import config from '@janblazej/eslint-config-react-native'
export default config
```

If you need to override or extend any rules, you can do so in your own ESLint config file.

```js
import config from '@janblazej/eslint-config-react-native'

export default [
    ...config,
    {
        ignores: ['node_modules', 'build'],
    },
]

```
---

Maintained by Jan Blazej. Contributions and suggestions welcome!
npm package: @janblazej/react-native-materials
Description: React Native component for native Material effects
Author: Jan Blazej
Latest version: 0.1.2

# @janblazej/react-native-materials

React Native component for native Material effects — using SwiftUI `Material` on iOS and `RenderEffect` on Android for consistent blur and translucency.

## Features

- ✨ Native SwiftUI `Material` on iOS
- 🌀 Android `RenderEffect` support (API 31+)
- 📱 Consistent blur and translucency across platforms
- ⚡️ High-performance, platform-optimized rendering


## Screenshots

| iOS Light                                    | iOS Dark                           | Android Light                                        | Android Dark |
|----------------------------------------------|------------------------------------|------------------------------------------------------|--------------|
| ![iOS Light](./example/assets/ios-light.png) | ![iOS Dark](./example/assets/ios-dark.png) | ![Android Light](./example/assets/android-light.png) | ![Android Dark](./example/assets/android-dark.png) |

> _Screenshots above to show the effect on each platform and theme._

## Installation

```sh
yarn add @janblazej/react-native-materials
```

> **Note:** After installing, you need to prebuild your app to generate the native code. Run:
>
> ```sh
> npx expo prebuild
> ```
>
> This step is required for the native modules to be linked in your project.


## Usage

```tsx
import { MaterialView } from '@janblazej/react-native-materials'

<VStack>
    <MaterialView material="thin" style={StyleSheet.absoluteFill} />
    <Text>Material</Text>
</VStack>
```



## Props

| **Prop**   | **Type**                                                    | **Default** | **Required** | **Description**                                                                 |
|:-----------|:------------------------------------------------------------|:-----------:|:------------:|:-------------------------------------------------------------------------------|
| `material` | `'ultra-thin'` \| `'thin'` \| `'regular'` \| `'thick'` \| `'ultra-thick'` | `'regular'`  |   No        | Material                                       |
| `variant`  | `'light'` \| `'dark'`                                       |  auto       |    No        | Forces light/dark appearance. If not set, uses system color scheme.            |
| ViewProps  | [ViewProps](https://reactnative.dev/docs/view#props)        |    —        |    No        | All standard React Native View props.                                           |




## Native Implementations
- [iOS SwiftUI MaterialView.swift](./ios/MaterialView.swift)
- [Android MaterialView.kt](./android/src/main/java/com/janblazej/materials/MaterialView.kt)


## License
MIT
npm package: @janbox/rn-core-ui
Description: Ichiba react-native design system
Author: Janbox
Latest version: 1.2.1

# @janbox/rn-core-ui

Ichiba private react-native design system

## Installation

```sh
npm install @janbox/rn-core-ui

or

yarn add @janbox/rn-core-ui
```

## Usage

```js
// ---- using Button Component ------
import { Button, ButtonTypes, ButtonSizes } from "@janbox/rn-core-ui";

// ...

<Button
  buttonSize={ButtonSizes.MEDIUM}
  buttonStyle={ButtonTypes.SECONDARY_ONE}
  onPress={() => setButtonDisable(true)}
  isLoading
  isDisabled
  name="Click me"
/>;
```

```js
// ---- using Tab Component ------
import {
  ITabView,
  ITabBarItem,
  ITabItemProps,
  TabModel,
} from "@janbox/rn-core-ui";

// ...
const App = (second) => {
  const [index, setIndex] = React.useState < number > 0;
  const routes: Array<TabModel> = [];

  const renderTabIcon = (props: ITabItemProps) => {
    return <ITabBarItem {...props} />;
  };

  const renderScene = React.useCallback(({ tab }: { tab: TabModel }) => {
    switch (tab.key) {
      case "Button":
        return <ButtonTab />;
      default:
        return <></>;
    }
  }, []);

  return (
    <ITabView
      onIndexChange={setIndex}
      renderScene={renderScene}
      navigationState={{ index, routes }}
      renderTabIcon={renderTabIcon} // ---- custom ItemTabbar
      // disableSwipe       // ----- disable Swipe tab
      isFixed // ----- styles Fixed tabbar
    />
  );
};
```

## Contributing

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

## Developer Guide

See the [develop guide](DEP_GUIDER.md) to learn how to setup repository and the development workflow for ichiba Mobile Developer.

## Template Use

- [React-native-cli](https://reactnative.dev/docs/environment-setup)
- Template [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
- Manager/Testing template [Storybook for React Native](https://github.com/storybookjs/react-native)