open-index/open-npm huggingface dataset:
npm package: @okame/gmap-mvt
Description: Library for displaying MVT source on googlemap
Author: okame
Latest version: 0.1.11

# gmap-mvt
Library for displaying MVT source on googlemap

[![NPM version](https://img.shields.io/npm/v/@okame/gmap-mvt.svg)](https://www.npmjs.com/package/@okame/gmap-mvt)
[![Downloads](https://img.shields.io/npm/dt/@okame/gmap-mvt)](https://npmcharts.com/compare/@okame/gmap-mvt?minimal=true)
[![Github Open Issiues](https://img.shields.io/github/issues/okame/gmap-mvt)]()
[![Github Closed Issiues](https://img.shields.io/github/issues-closed-raw/okame/gmap-mvt)]()
[![GitHub forks](https://img.shields.io/github/forks/okame/gmap-mvt)]()
[![GitHub Stars](https://img.shields.io/github/stars/okame/gmap-mvt)]()

## This library is beta version!
This software has not been fully tested.
If you find bugs, please create an issue.

## Installation
```
# npm
npm install @okame/gmap-mvt

# yarn
yarn add @okame/gmap-mvt
```

## Usage
```typescript
# create google map object
const map = new google.maps.Map(element, {
      center: { lat: 35.692823106341834, lng: 139.71100348420828 },
      zoom: 9
})

# MVT source
const url = 'https://example.com/rain_layer'

# Options
const options = {}

# Create layer instance
const mapType = new MvtMapType(map, url, options)

# Add layer to GoogleMap
map.overlayMapTypes.insertAt(0, mapType)
```

Options for MvtMapType

| name || type | description |
| ---------- | - | -- | --- |
| map || google.maps.Map | GoogleMap |
| url || string | MVT source url |
| options || object ||
|| tileSize | google.maps.Size ||
|| alt | string ||
|| name | string ||
|| maxZoom | number ||
|| minZoom | number ||
|| projection | google.maps.Projection ||
|| radius | number ||
|| style | google.maps.Data.StylingFunction \| google.maps.Data.StyleOptions | styling |
|| filterFeature | (feature: GeoJsonFeature) => boolean | filter features |

### Styling
By setting a callback function as shown below, you can dynamically style observed values to `options.style`.

```typescript
const style = (feature: google.maps.Data.Feature) => {
  const val = feature.getProperty('val') as number
  const fillColor = val > 50 ? 'red' : 'blue'

  return {
    fillColor,
    fillOpacity: 0.6,
    strokeWeight: 0
  }
}

const options = { style }
const mapType = new MvtMapType(map, url, options)
```

### Filtering
By setting a callback function as shown below, you can filter features to `options.filterFeature`.

```typescript
const filterFeature = (feature: GeoJsonFeature) => {
  return feature.properties?.val > 0
}
const options = { filterFeature }
const mapType = new MvtMapType(map, url, options)
```
npm package: @okami-team/cli
Description: CLI for Okami React framework
Author: Okami Team
Latest version: 0.1.13

# Okami CLI

The official command-line interface for Okami, a modern framework that brings Angular-like features to React. This CLI helps you quickly scaffold and manage your Okami applications.

## Features

- **Project Generation**: Create new Okami projects with a single command
- **Component Generation**: Quickly generate components with decorators
- **Service Generation**: Create injectable services with the DI container
- **Page Generation**: Generate page components with routing setup
- **Redux Integration**: Generate Redux slices with RTK Query support
- **TypeScript Ready**: Full TypeScript support out of the box

## Installation

### Global Installation (Recommended)

```bash
npm install -g @okami-team/cli
```

## Usage

### Create a New Project

```bash
okami new my-app
cd my-app
npm run dev
```

### Generate a new page

```bash
nexus create-page PageName
```

### Generate a new Redux slice

```bash
# Basic Redux slice
nexus create-redux featureName

# With RTK Query API integration
nexus create-redux featureName --with-api
```

This will create the following structure:
```
src/
└── features/
    └── featureName/
        ├── featureNameSlice.ts  # Redux slice with actions & reducers
        ├── types.ts            # TypeScript type definitions
        ├── selectors.ts        # Selector functions
        ├── api.ts              # RTK Query API (if --with-api flag is used)
        └── index.ts            # Barrel file for clean exports
```

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
npm package: @okamjs/okam-linux-arm-gnueabihf
Description: This is the **armv7-unknown-linux-gnueabihf** binary for `@okamjs/okam`
Latest version: 0.0.1

# `@okamjs/okam-linux-arm-gnueabihf`

This is the **armv7-unknown-linux-gnueabihf** binary for `@okamjs/okam`
npm package: @okamjs/okam-linux-arm64-musl
Description: This is the **aarch64-unknown-linux-musl** binary for `@okamjs/okam`
Latest version: 0.0.1

# `@okamjs/okam-linux-arm64-musl`

This is the **aarch64-unknown-linux-musl** binary for `@okamjs/okam`
npm package: @okamjs/okam-linux-x64-gnu
Description: This is the **x86_64-unknown-linux-gnu** binary for `@okamjs/okam`
Latest version: 0.4.13

# `@okamjs/okam-linux-x64-gnu`

This is the **x86_64-unknown-linux-gnu** binary for `@okamjs/okam`
npm package: @okamjs/okam-linux-x64-musl
Description: This is the **x86_64-unknown-linux-musl** binary for `@okamjs/okam`
Latest version: 0.0.1

# `@okamjs/okam-linux-x64-musl`

This is the **x86_64-unknown-linux-musl** binary for `@okamjs/okam`
npm package: @okamjs/okam-win32-arm64-msvc
Description: This is the **aarch64-pc-windows-msvc** binary for `@okamjs/okam`
Latest version: 0.0.1

# `@okamjs/okam-win32-arm64-msvc`

This is the **aarch64-pc-windows-msvc** binary for `@okamjs/okam`
npm package: @okamjs/okam-win32-ia32-msvc
Description: This is the **i686-pc-windows-msvc** binary for `@okamjs/okam`
Latest version: 0.0.1

# `@okamjs/okam-win32-ia32-msvc`

This is the **i686-pc-windows-msvc** binary for `@okamjs/okam`
npm package: @okamjs/okam-win32-x64-msvc
Description: This is the **x86_64-pc-windows-msvc** binary for `@okamjs/okam`
Latest version: 0.0.1

# `@okamjs/okam-win32-x64-msvc`

This is the **x86_64-pc-windows-msvc** binary for `@okamjs/okam`
npm package: @okancezik/ui-framework
Description: This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Latest version: 0.0.5

# React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

```js
export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])
```

You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:

```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])
```
npm package: @okane-no/fiken-sdk
Description: NodeJS client for Fiken API
Author: OpenAPI-Generator Contributors
Latest version: 1.0.2

# fiken-sdk
Node SDK for Fiken API v2

This client is autogenerated using [openapi-typescript-codegen](https://github.com/ferdikoomen/openapi-typescript-codegen) and have been tested against Fiken API to verify correctness. Refer to test directory for more details.

## Getting started

```bash
npm i -D @okane-no/fiken-sdk
```

### Using Personal API Token

```ts
let client = new FikenClient(TOKEN: 'personal-api-token')
```

### Using Client crededentials (Coming soon)

```ts
let client = new FikenClient(TOKEN: getAccessToken(clientId, clientSecret))
```

## Note

* Pagination and Filtering headers are not implemented yet
* The API client is generated from an modified OpenAPI Spec that can be found in spec directory, as the original OpenAPI specification files for Fiken API 2.0.0 has an 'example' capitalized, causing errors.
npm package: @okanw10/sdk
Description: 🛠 An SDK for building applications on top of pancakeswap.
Latest version: 1.0.3

# Pancakeswap SDK

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![Actions Status](https://github.com/pancakeswap/pancakeswap-sdk/workflows/CI/badge.svg)](https://github.com/pancakeswap/pancakeswap-sdk)
[![npm version](https://img.shields.io/npm/v/@pancakeswap-lib/sdk/latest.svg)](https://www.npmjs.com/package/@pancakeswap-lib/sdk/v/latest)

## Running tests

To run the tests, follow these steps. You must have at least node v10 and [yarn](https://yarnpkg.com/) installed.

First clone the repository:

```sh
git clone https://github.com/pancakeswap/pancakeswap-sdk.git
```

Move into the pancakeswap-sdk working directory

```sh
cd pancakeswap-sdk/
```

Install dependencies

```sh
yarn install
```

Run tests

```sh
yarn test
```

You should see output like the following:

```sh
yarn run v1.22.4
$ tsdx test
 PASS  test/constants.test.ts
 PASS  test/pair.test.ts
 PASS  test/fraction.test.ts
 PASS  test/miscellaneous.test.ts
 PASS  test/entities.test.ts
 PASS  test/trade.test.ts

Test Suites: 1 skipped, 6 passed, 6 of 7 total
Tests:       3 skipped, 82 passed, 85 total
Snapshots:   0 total
Time:        5.091s
Ran all test suites.
✨  Done in 6.61s.
```
npm package: @okanw10/sdktest
Description: 🛠 An SDK for building applications on top of pancakeswap.
Latest version: 1.0.2

# Pancakeswap SDK

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![Actions Status](https://github.com/pancakeswap/pancakeswap-sdk/workflows/CI/badge.svg)](https://github.com/pancakeswap/pancakeswap-sdk)
[![npm version](https://img.shields.io/npm/v/@pancakeswap-lib/sdk/latest.svg)](https://www.npmjs.com/package/@pancakeswap-lib/sdk/v/latest)

## Running tests

To run the tests, follow these steps. You must have at least node v10 and [yarn](https://yarnpkg.com/) installed.

First clone the repository:

```sh
git clone https://github.com/pancakeswap/pancakeswap-sdk.git
```

Move into the pancakeswap-sdk working directory

```sh
cd pancakeswap-sdk/
```

Install dependencies

```sh
yarn install
```

Run tests

```sh
yarn test
```

You should see output like the following:

```sh
yarn run v1.22.4
$ tsdx test
 PASS  test/constants.test.ts
 PASS  test/pair.test.ts
 PASS  test/fraction.test.ts
 PASS  test/miscellaneous.test.ts
 PASS  test/entities.test.ts
 PASS  test/trade.test.ts

Test Suites: 1 skipped, 6 passed, 6 of 7 total
Tests:       3 skipped, 82 passed, 85 total
Snapshots:   0 total
Time:        5.091s
Ran all test suites.
✨  Done in 6.61s.
```
npm package: @okaryo/gatsby-remark-link-card
Description: Gatsby Remark plugin to embed link card
Author: okaryo
Latest version: 1.0.6

## @okaryo/gatsby-remark-link-card
Gatsby Remark plugin to embed link card to your markdown.

This plugin allows you to display links as link cards in Markdown without the need for any special syntax.

### Sample
![Smaple](./docs/sample.png)

### Installation
```sh
npm install @okaryo/gatsby-remark-link-card
```

### How to use
#### in Config
```js
// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        `@okaryo/gatsby-remark-link-card`
      ]
    }
  }
];
```
#### in Markdown
Only the links that are formatted as a paragraph and surrounded by empty lines will be displayed as link cards.

```md
✅
(empty line)
https://github.com/okaryo/gatsby-remark-link-card
(empty line)

✅
## Header
https://github.com/okaryo/gatsby-remark-link-card

❌
text
https://github.com/okaryo/gatsby-remark-link-card

❌
(empty line)
[link text](https://github.com/okaryo/gatsby-remark-link-card)
(empty line)

❌
(empty line)
* https://github.com/okaryo/gatsby-remark-link-card
(empty line)
```

### Customization
You can apply custom styles to the classes specified within the link card to customize its appearance.

```css
.gatsby-remark-link-card__container {}

.gatsby-remark-link-card__link {}

.gatsby-remark-link-card__main {}

.gatsby-remark-link-card__content {}

.gatsby-remark-link-card__title {}

.gatsby-remark-link-card__description {}

.gatsby-remark-link-card__meta {}

.gatsby-remark-link-card__favicon {}

.gatsby-remark-link-card__url {}

.gatsby-remark-link-card__thumbnail {}

.gatsby-remark-link-card__image {}
```
npm package: @okatechnology/eslint-config
Description: oka's eslint
Author: Kaoru Okazoe
Latest version: 1.9.1

# ESLint / Prettier / TypeScript Config

## Install

```bash
npm install --save-dev @okatechnology/eslint-config
```

## Usage

### Config ESLint

create `eslint.config.js` at your project root.

| Project Type | Exported Config Name | Config File Path   |
| ------------ | ------------------- | --------------- |
| React | `eslintConfigReact` | `eslintConfig/eslint.config.react.js` |
| React Native | `eslintConfigReactNative` | `eslintConfig/eslint.config.reactNative.js` |
| Expo | `eslintConfigReactNativeExpo` | `eslintConfig/eslint.config.reactNativeExpo.js` |
| Next.js | `eslintConfigReactNext` | `eslintConfig/eslint.config.reactNext.js` |
| Node.js | `eslintConfigNode` | `eslintConfig/eslint.config.node.js` |

If you want to config eslint for React project, write the following.

```javascript:.eslint.config.js
import { eslintConfigReact } from '@okatechnology/eslint-config/eslintConfig/eslint.config.react.js';

export default [
  ...eslintConfigReact,
  /* your config */
];
```

### Config Prettier

create `.prettierrc.js` at your project root and write the following.

```javascript:.prettierrc.js
module.exports = {
  ...require('@okatechnology/eslint-config/prettierrc/prettierrc'),
}
```

### Config TypeScript

create `tsconfig.json` at your project root.

| Project Type | Config File Path |
| ------------ | --------------- |
| React / Next.js | `tsconfig/tsconfig.react.json` |
| React Native / Expo | `tsconfig/tsconfig.react-native.json` |
| Node.js | `tsconfig/tsconfig.node.json` |

If you want to config tsconfig for React project, write the following.

```json:tsconfig.json
{
  "extends": "@okatechnology/eslint-config/tsconfig/tsconfig.react.json",
  /* your config */
}
```
npm package: @okayauco/charful
Description: charful is a baby string utility library that's trying to be careful
Author: Aucoeur Ngo
Latest version: 0.2.2

# be charful ok
[![NPM version](https://img.shields.io/npm/v/@okayauco/charful.svg?style=flat&color=eaff00)](https://www.npmjs.com/package/@okayauco/charful) 
![GitHub last commit](https://img.shields.io/github/last-commit/aucoeur/charful?style=flat)
[![NPM downloads](https://img.shields.io/npm/dt/@okayauco/charful.svg?style=flat)](https://npmjs.org/package/@okayauco/charful)  

charful is a baby string utility library that's trying to be careful  
*(char like character, not burnt to a crisp)* 🤓  

# Usage
```js
import Charful from 'charful';

const char = new Charful();
const snek = char.snakeCase('danger noodle')

console.log(snek) 
// returns `danger_noodle`

```

## Resources
- https://sugarjs.com/extending/
- https://humanwhocodes.com/blog/2010/03/02/maintainable-javascript-dont-modify-objects-you-down-own/
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
npm package: @okaygift/react-modal-system
Description: A flexible, context-based modal and dialog system for React.
Author: OkayGift
Latest version: 1.0.0

React Modal System
A flexible, context-based modal and dialog system for React, allowing you to open modals from anywhere in your application.

The Problem
Managing modals globally in a React application can be a hassle. You often end up with global state (isModalOpen) cluttered at the top level of your app, and you have to pass down openModal and closeModal functions through many layers of components ("prop drilling").

The Solution
This library provides a simple and clean API to manage modals. It uses a React Context and a Portal to render modals at the top of your app's DOM tree, while allowing any component to trigger them with a simple hook.

Installation
npm install @your-username/react-modal-system

How to Use
1. Wrap your app in <ModalProvider>
In your main App.tsx or layout file, wrap your application with the ModalProvider.

// In your main App.tsx
import { ModalProvider } from '@your-username/react-modal-system';

function App() {
  return (
    <ModalProvider>
      {/* The rest of your application */}
    </ModalProvider>
  );
}

2. Create your Modal Components
Create your modal components as you normally would. You can optionally receive a close function via props if you want an internal close button.

// MyAwesomeModal.tsx
import { useModal } from '@your-username/react-modal-system';

export const MyAwesomeModal = ({ title }) => {
  const { close } = useModal(); // Get the close function from the context

  return (
    <div className="modal-backdrop">
      <div className="modal-content">
        <h2>{title}</h2>
        <p>This is a modal opened from anywhere!</p>
        <button onClick={close}>Close</button>
      </div>
    </div>
  );
};

3. Open Modals from Anywhere
Now, any component inside the ModalProvider can use the useModal hook to open any modal component.

// Any component in your app
import { useModal } from '@your-username/react-modal-system';
import { MyAwesomeModal } from './MyAwesomeModal';

function MyPage() {
  const { open } = useModal();

  const showModal = () => {
    // Open the modal and pass props to it
    open(MyAwesomeModal, { title: 'Hello from MyPage!' });
  };

  return (
    <div>
      <h1>My Page</h1>
      <button onClick={showModal}>Open Modal</button>
    </div>
  );
}

API
<ModalProvider />
The top-level provider component.

useModal()
A hook to access the modal system. Must be used inside a <ModalProvider>.

Returns:

open(Component, props): A function to open a modal.

Component: The modal component to render.

props (optional): An object of props to pass to the modal component.

close(): A function to close the most recently opened modal.
npm package: @okaygift/react-toast-system
Description: A flexible, context-based notification and toast system for React.
Author: OkayGift
Latest version: 1.0.0

React Toast System
A flexible, context-based notification and toast system for React, allowing you to display temporary messages from anywhere in your application.

The Problem
Displaying temporary feedback to users (like "Profile saved successfully!" or "Connection lost") can be complex. You need to manage a list of active notifications, handle timers to automatically dismiss them, and render them in a consistent place on the screen, often leading to scattered state and logic.

The Solution
This library provides a simple API to manage toasts. It uses a React Context and a Portal to render notifications at the top of your app's DOM tree, while allowing any component to trigger them with a simple hook.

Installation
npm install @your-username/react-toast-system

How to Use
1. Wrap your app in <ToastProvider>
In your main App.tsx or layout file, wrap your application with the ToastProvider. This should be near the top of your component tree.

// In your main App.tsx
import { ToastProvider } from '@your-username/react-toast-system';

function App() {
  return (
    <ToastProvider>
      {/* The rest of your application */}
    </ToastProvider>
  );
}

2. Trigger Toasts from Anywhere
Now, any component inside the ToastProvider can use the useToast hook to show a new notification.

// Any component in your app
import { useToast } from '@your-username/react-toast-system';

function MyProfilePage() {
  const { add } = useToast();

  const handleSave = () => {
    // ... save logic
    add('Profile saved successfully!', 'success');
  };

  const handleError = () => {
    //... error logic
    add('Failed to save profile.', 'error');
  }

  return (
    <div>
      <h1>My Profile</h1>
      <button onClick={handleSave}>Save</button>
    </div>
  );
}

This will render a toast that automatically disappears after 5 seconds. You can add your own CSS to style the .toast-container, .toast, and type-specific classes (.toast-success, .toast-error).

API
<ToastProvider />
The top-level provider component.

useToast()
A hook to access the toast system. Must be used inside a <ToastProvider>.

Returns:

add(message, type): A function to show a new toast.

message: The string to display.

type: The type of toast ('success', 'error', or 'info').
npm package: @okaygift/use-object-state
Description: A simple React hook to update object state without needing to manually spread the previous state.
Author: OkayGift
Latest version: 1.0.0

Use Object State Hook
A simple React hook to update object state without needing to manually spread ...prevState every time.

The Problem
When using the standard useState hook with an object, updating a single property is verbose. You must always remember to spread the previous state to avoid overwriting the other properties:

const [user, setUser] = useState({ name: 'Alex', role: 'user' });

// To update just the role:
const makeAdmin = () => {
  setUser(prevUser => ({
    ...prevUser, // This part is repetitive
    role: 'admin',
  }));
};

The Solution
useObjectState provides an updater function that automatically merges partial updates into the existing state, making your code cleaner and less error-prone.

import { useObjectState } from 'use-object-state';

const [user, updateUser] = useObjectState({ name: 'Alex', role: 'user' });

// Now you only need to provide the properties you want to change:
const makeAdmin = () => {
  updateUser({ role: 'admin' });
};

// It also supports the function update form!
const makeAdmin = () => {
  updateUser(prevUser => ({
    //... some logic with prevUser
    role: 'admin'
  }))
}

Installation
npm install use-object-state

API
useObjectState(initialState)
Parameters
initialState (required): The initial object value for your state.

Returns
An array tuple [state, updateState]:

state: The current state object.

updateState: A function to update the state. It accepts a partial state object that will be merged into the current state.