open-index/open-npm huggingface dataset:
npm package: @ivonna/navigation
Description: IvonnaNavigation
Author: emmm
Latest version: 1.0.7

# @ivonna/navigation

Ivonna is a hybrid development framework of `native` and `react native`, which supports IOS and Android.

## Installation

```sh
npm install @ivonna/navigation
```

## Usage

#### Registry your components

```jsx
import { AppRegistry } from '@ivonna/navigation';

AppRegistry.registerComponent('Home', HomeComponent);
AppRegistry.registerComponent('Mine', MineComponent);
```

#### Navigate to destination

```jsx
import { Navigation } from '@ivonna/navigation';

// ...

Navigation.push('Home');
```

#### Using the State Manager

```jsx
import { Container } from '@ivonna/navigation';

const { moduleStore, setModuleStore } = Container.useContainer('Common'); // `Common` is module name
```

## Contributing

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

## License

MIT

## DingTalk group

<img width="320" src="https://smebimage.fuliaoyi.com/FlE5Sr6AX5iVyynjozrVkEeBzVMR">
npm package: @ivonto-main/planum
Description: Planum - A React UI Kit for Ivonto Design System. Ivonto is self-hosted eCommerce platform for digital agencies
Author: Ivonto
Latest version: 7.0.30

# Powered by

- 🏎 [Turborepo](https://turbo.build/repo) — High-performance build system for Monorepos
- 🚀 [React](https://reactjs.org/) — JavaScript library for user interfaces
- 🛠 [Tsup](https://github.com/egoist/tsup) — TypeScript bundler powered by esbuild
- 📖 [Storybook](https://storybook.js.org/) — UI component environment powered by Vite

- Ivonto design system
- Accessibility friendly components

As well as a few others tools used:

- [TypeScript](https://www.typescriptlang.org/) for static type checking
- [ESLint](https://eslint.org/) for code linting
- [Prettier](https://prettier.io) for code formatting
- [Changesets](https://github.com/changesets/changesets) for managing versioning and changelogs
- [GitHub Actions](https://github.com/changesets/action) for fully automated package publishing

# Live ⚡️

- Demo Example App [![Netlify Status](https://api.netlify.com/api/v1/badges/c492e5e8-9f20-4b17-a494-a57a09ea1768/deploy-status)](https://app.netlify.com/sites/planum-demo/deploys)

  https://ivonto.com

- Planum Storybook [![Netlify Status](https://api.netlify.com/api/v1/badges/8a6b4d8d-d711-436c-94cd-6f16b47e6dc2/deploy-status)](https://app.netlify.com/sites/planum-storybook/deploys)

  https://planum-storybook.netlify.app

# Install

```bash
# npm
npm install @ivonto-main/planum
```

```bash
# yarn
yarn add @ivonto-main/planum
```

```js
import { Button } from '@ivonto-main/planum'
```
npm package: @ivonto-main/planum-editor
Description: Planum Editor - text editor for Planum
Author: Ivonto
Latest version: 3.0.0

# Live ⚡️

- Demo Example App [![Netlify Status](https://api.netlify.com/api/v1/badges/c492e5e8-9f20-4b17-a494-a57a09ea1768/deploy-status)](https://app.netlify.com/sites/planum-demo/deploys)

  https://ivonto.com

- Planum Storybook [![Netlify Status](https://api.netlify.com/api/v1/badges/8a6b4d8d-d711-436c-94cd-6f16b47e6dc2/deploy-status)](https://app.netlify.com/sites/planum-storybook/deploys)

  https://planum-storybook.netlify.app

# Install

```bash
# npm
npm install @ivonto-main/planum-editor
```

```bash
# yarn
yarn add @ivonto-main/planum-editor
```

```js
import { Editor } from '@ivonto-main/planum-editor'
```
npm package: @ivonto-main/planum-icons
Description: Planum Icons - based on phosphor icons as part of Ivonto design
Author: Ivonto
Latest version: 2.0.4

# Live ⚡️

- Demo Example App [![Netlify Status](https://api.netlify.com/api/v1/badges/c492e5e8-9f20-4b17-a494-a57a09ea1768/deploy-status)](https://app.netlify.com/sites/planum-demo/deploys)

  https://ivonto.com

- Planum Storybook [![Netlify Status](https://api.netlify.com/api/v1/badges/8a6b4d8d-d711-436c-94cd-6f16b47e6dc2/deploy-status)](https://app.netlify.com/sites/planum-storybook/deploys)

  https://planum-storybook.netlify.app

# Install

```bash
# npm
npm install @ivonto-main/planum-icons
```

```bash
# yarn
yarn add @ivonto-main/planum-icons
```

```jsx
import { UserIcon } from '@ivonto-main/planum-icons'

<UserIcon>
```
npm package: @ivonto-main/planum-phone
Description: Planum Phone - phone input for Planum
Author: Ivonto
Latest version: 1.0.5

# Live ⚡️

- Demo Example App [![Netlify Status](https://api.netlify.com/api/v1/badges/c492e5e8-9f20-4b17-a494-a57a09ea1768/deploy-status)](https://app.netlify.com/sites/planum-demo/deploys)

  https://ivonto.com

- Planum Storybook [![Netlify Status](https://api.netlify.com/api/v1/badges/8a6b4d8d-d711-436c-94cd-6f16b47e6dc2/deploy-status)](https://app.netlify.com/sites/planum-storybook/deploys)

  https://planum-storybook.netlify.app

# Install

```bash
# npm
npm install @ivonto-main/planum-phone
```

```bash
# yarn
yarn add @ivonto-main/planum-phone
```

```js
import { Phone } from '@ivonto-main/planum-phone'
```
npm package: @ivonto/planum
Description: Planum - A React UI Kit for Ivonto Design System. Ivonto is self-hosted eCommerce platform for digital agencies
Author: Ivonto
Latest version: 7.0.0

# Powered by

- 🏎 [Turborepo](https://turbo.build/repo) — High-performance build system for Monorepos
- 🚀 [React](https://reactjs.org/) — JavaScript library for user interfaces
- 🛠 [Tsup](https://github.com/egoist/tsup) — TypeScript bundler powered by esbuild
- 📖 [Storybook](https://storybook.js.org/) — UI component environment powered by Vite

- Ivonto design system
- Accessibility friendly components

As well as a few others tools used:

- [TypeScript](https://www.typescriptlang.org/) for static type checking
- [ESLint](https://eslint.org/) for code linting
- [Prettier](https://prettier.io) for code formatting
- [Changesets](https://github.com/changesets/changesets) for managing versioning and changelogs
- [GitHub Actions](https://github.com/changesets/action) for fully automated package publishing

# Live ⚡️

- Demo Example App [![Netlify Status](https://api.netlify.com/api/v1/badges/c492e5e8-9f20-4b17-a494-a57a09ea1768/deploy-status)](https://app.netlify.com/sites/planum-demo/deploys)

  https://ivonto.com

- Planum Storybook [![Netlify Status](https://api.netlify.com/api/v1/badges/8a6b4d8d-d711-436c-94cd-6f16b47e6dc2/deploy-status)](https://app.netlify.com/sites/planum-storybook/deploys)

  https://planum-storybook.netlify.app

# Install

```bash
# npm
npm install @ivonto/planum
```

```bash
# yarn
yarn add @ivonto/planum
```

```js
import { Button } from '@ivonto/planum'
```
npm package: @ivonto/planum-editor
Description: Planum Editor - text editor for Planum
Author: Ivonto
Latest version: 3.0.0

# Live ⚡️

- Demo Example App [![Netlify Status](https://api.netlify.com/api/v1/badges/c492e5e8-9f20-4b17-a494-a57a09ea1768/deploy-status)](https://app.netlify.com/sites/planum-demo/deploys)

  https://ivonto.com

- Planum Storybook [![Netlify Status](https://api.netlify.com/api/v1/badges/8a6b4d8d-d711-436c-94cd-6f16b47e6dc2/deploy-status)](https://app.netlify.com/sites/planum-storybook/deploys)

  https://planum-storybook.netlify.app

# Install

```bash
# npm
npm install @ivonto/planum-editor
```

```bash
# yarn
yarn add @ivonto/planum-editor
```

```js
import { Editor } from '@ivonto/planum-editor'
```
npm package: @ivonto/planum-icons
Description: Planum Icons - based on phosphor icons as part of Ivonto design
Author: Ivonto
Latest version: 2.0.0

# Live ⚡️

- Demo Example App [![Netlify Status](https://api.netlify.com/api/v1/badges/c492e5e8-9f20-4b17-a494-a57a09ea1768/deploy-status)](https://app.netlify.com/sites/planum-demo/deploys)

  https://ivonto.com

- Planum Storybook [![Netlify Status](https://api.netlify.com/api/v1/badges/8a6b4d8d-d711-436c-94cd-6f16b47e6dc2/deploy-status)](https://app.netlify.com/sites/planum-storybook/deploys)

  https://planum-storybook.netlify.app

# Install

```bash
# npm
npm install @ivonto/planum-icons
```

```bash
# yarn
yarn add @ivonto/planum-icons
```

```jsx
import { UserIcon } from '@ivonto/planum-icons'

<UserIcon>
```
npm package: @ivonto/planum-phone
Description: Planum Phone - phone input for Planum
Author: Ivonto
Latest version: 1.0.0

# Live ⚡️

- Demo Example App [![Netlify Status](https://api.netlify.com/api/v1/badges/c492e5e8-9f20-4b17-a494-a57a09ea1768/deploy-status)](https://app.netlify.com/sites/planum-demo/deploys)

  https://ivonto.com

- Planum Storybook [![Netlify Status](https://api.netlify.com/api/v1/badges/8a6b4d8d-d711-436c-94cd-6f16b47e6dc2/deploy-status)](https://app.netlify.com/sites/planum-storybook/deploys)

  https://planum-storybook.netlify.app

# Install

```bash
# npm
npm install @ivonto/planum-phone
```

```bash
# yarn
yarn add @ivonto/planum-phone
```

```js
import { Phone } from '@ivonto/planum-phone'
```
npm package: @ivopatty/react-scripts
Description: Configuration and scripts for Create React App.
Latest version: 3.3.0

# react-scripts

This package includes scripts and configuration used by [Create React App](https://github.com/facebook/create-react-app).<br>
Please refer to its documentation:

- [Getting Started](https://facebook.github.io/create-react-app/docs/getting-started) – How to create a new app.
- [User Guide](https://facebook.github.io/create-react-app/) – How to develop apps bootstrapped with Create React App.
npm package: @ivopr/eslint-config
Description: Ivo's ESLint configuration.
Latest version: 1.2.0

# Ivo's ESLint config

## Whats included?

- Standard config base;
- React plugin;
- React Hooks plugin;
- JSX a11y plugin;
- Prettier;
- Import Sort

## Setup

1. Install the dependencies
```
npm i -D eslint @ivopr/eslint-config
```

2. Create a `.eslintrc.json` file extending the config:
```
{
  "extends": "@ivopr/eslint-config/react"
  // "extends": "@ivopr/eslint-config/node"
}
```

> You can also use a `.eslintrc.js` instead of JSON if you prefer.
npm package: @ivorgri/sveltekit-pluggable-static-adapter-external-image-plugin
Description: Plugin which replaces the URL's in build files from Sveltekit, by a local variant. To be used with @ivorgri/sveltekit-pluggable-static-adapter
Author: Ivor Grisel
Latest version: 1.0.1

# sveltekit-pluggable-static-adapter-external-image-plugin
Plugin which replaces the URL's in build files from Sveltekit to a local variant. To be used with [@ivorgri/sveltekit-pluggable-static-adapter](https://www.npmjs.com/package/@ivorgri/sveltekit-pluggable-static-adapter). You need to provide the origin domain of the images to your website (this could be an array), followed with the builder, pages and assets attributes received from the callback hook. The function will take these URLs and start going through the generated files. Once it finds a complete link, including an image extension, it will download the files into the "img" folder inside the folder that provided for "assets". Once all the files are downloaded, the URL in the generated files with be replaced with a relative link to the "img" folder.

Be aware: the adapter looks for the base URL which is similar for ALL images. Any dynamic routing (i.e. date sub directories) are added to the "img" folder.

For example, if you have the following URL:

```https://your.domain.com/upload/folder/2022/02/02/image.jpg```

You should provide the following URL:

```https://your.domain.com/upload/folder```

The function will then create the following directory in the "img" folder:

```
img
└─── 2022
     └─── 02
          └─── 02
               |   image.jpg
```

The function should be called as follows:

```js
// svelte.config.js

// ...

import replaceExternalImages from '@ivorgri/sveltekit-pluggable-static-adapter-external-image-plugin';

//...

export default {
	kit: {
		adapter: adapter({
            // ...
            afterPrerenderCallback: async (builder, pages, assets) => {
				await replaceExternalImages("origin.domain.of.images.com",builder,pages,assets)
			},
		})
	}
};
```
npm package: @ivorgri/sveltekit-pluggable-static-adapter-sitemap-plugin
Description: Plugin for creating sitemap.xml after Sveltekit build. To be used with @ivorgri/sveltekit-pluggable-static-adapter
Author: Ivor Grisel
Latest version: 1.0.4

# sveltekit-pluggable-static-adapter-sitemap-plugin
Plugin for creating sitemap.xml after Sveltekit build. To be used with [@ivorgri/sveltekit-pluggable-static-adapter](https://www.npmjs.com/package/@ivorgri/sveltekit-pluggable-static-adapter). You need to provide the base of your website, followed with the builder and pages attributes received from the callback hook. The sitemap will be added to the resulting build directory. 

```js
// svelte.config.js

// ...

import generateSitemap from '@ivorgri/sveltekit-pluggable-static-adapter-sitemap-plugin';

//...

export default {
	kit: {
		adapter: adapter({
            // ...
            afterPrerenderCallback: async (builder, pages, assets) => {
				await generateSitemap("your.site.domain.com",builder,pages)
			},
		})
	}
};
```
npm package: @ivorgri/sveltekit-pluggable-static-adapter-webp-plugin
Description: Plugin for generating Webp images from a static Sveltekit build. To be used with @ivorgri/sveltekit-pluggable-static-adapter
Author: Ivor Grisel
Latest version: 1.0.2

# sveltekit-pluggable-static-adapter-webp-plugin
Plugin for generating Webp images from a static Sveltekit build. To be used with [@ivorgri/sveltekit-pluggable-static-adapter](https://www.npmjs.com/package/@ivorgri/sveltekit-pluggable-static-adapter). The function will take all the JPG/JPEG/PNG files it can find, and convert those to WEBP files. This option should be used in conjunction with a specific implementation for a component. It should convert the existing URL for an image to a WEBP variant. When running this in a development environment, without having access to the WEBP file, a condition is added which checks if a WEBP source set should be used. Make sure to change this when running the build, so the sourceset is added to the result.

How to call the function:

```js
// svelte.config.js

// ...

import convertAssetsToWebp from '@ivorgri/sveltekit-pluggable-static-adapter-webp-plugin';

//...

export default {
	kit: {
		adapter: adapter({
            // ...
            afterPrerenderCallback: async (builder, pages, assets) => {
				await convertAssetsToWebp(builder,assets);
			},
		})
	}
};
```

Possible implementation of a `<picture>` tag:

```ts
<script lang="ts">
    export let imageSrc:string;
    export let imageAlt:string;
    
    let useWebp = import.meta.env.VITE_USE_WEBP; // Or another environment variable that you would like to use

    $: imageSrcWebp = imageSrc.replace(/jpg|jpeg|png/g,"webp");
</script>

<picture>
    {#if useWebp}
        <source srcset="{imageSrcWebp}" type="image/webp"> 
    {/if}
    <img src="{imageSrc}" alt="{imageAlt}">
</picture>
```
npm package: @ivorobioff/ioc-react
Description: An integration that enables the use of the Service Locator in React applications.
Author: Igor Vorobiov
Latest version: 0.1.0

# 🔌 React Hook for `@ivorobioff/ioc-container`

A lightweight React integration for the `@ivorobioff/ioc-container` service locator.

## 📦 Installation

```bash
npm install @ivorobioff/ioc-react
```

## 🎯 What It Does

- Provides a React Context for the Service Locator.
- Exposes the `useService` hook to retrieve registered services inside components.

## 🚀 Quick Start

```ts
// services.ts
import { container } from '@ivorobioff/ioc-react';

export class Logger {
  log(msg: string) {
    console.log(msg);
  }
}

export function registerServices() {
  container.registerType(Logger);
}

```

```tsx
// App.tsx
import React from 'react';
import { ServiceContext, container } from '@ivorobioff/ioc-react';
import MyComponent from './MyComponent';
import { registerServices } from './services';

registerServices();

export default function App() {
  return (
    <ServiceContext.Provider value={container}>
      <MyComponent />
    </ServiceContext.Provider>
  );
}
```

```tsx
// MyComponent.tsx
import { useEffect } from 'react';
import { useService } from '@ivorobioff/ioc-react';
import { Logger } from './services';

export default function MyComponent() {
  const logger = useService(Logger);

  useEffect(() => {
    logger.log('Component mounted');
  }, []);

  return <div>Hello</div>;
}
```

## 🛠️ API

`useService`

Retrieves a service from the current `ServiceContext`.

```ts
useService<T>(reference: InstanceReference<T>): T
```

**Example**

```ts
const logger = useService(Logger);
```

`container`

The singleton container instance used to register services.

**Example**

```ts
import { container } from '@ivorobioff/ioc-react';
container.registerType(MyService);
```

`ServiceContext`

React context for the container. Injected into your app via provider.

```tsx
<ServiceContext.Provider value={container}>
  {/* children */}
</ServiceContext.Provider>

```

## 💡 Best Practice

- Register all services before rendering `<App />`.
- Avoid dynamic registration after the app starts — the container will lock on first `.get()` call.

## 📄 License

MIT
npm package: @ivoronin/paletty
Description: Apply paletty.dev color themes to your terminal via OSC sequences
Latest version: 0.1.2

# paletty-cli

Apply [paletty.dev](https://paletty.dev) color themes to your terminal via [OSC escape sequences](https://invisible-island.net/xterm/ctlseqs/ctlseqs.html#h3-Operating-System-Commands).

Works per-session, so you can run different themes in different terminal windows.

## Usage

```bash
npx @ivoronin/paletty apply <palette-id-or-url>
npx @ivoronin/paletty reset
```

## Examples

```bash
# Apply by palette ID
npx @ivoronin/paletty apply 7yC6wqIjOGN

# Apply by URL
npx @ivoronin/paletty apply https://paletty.dev/p/7yC6wqIjOGN/tokyo-night

# Reset terminal colors to defaults
npx @ivoronin/paletty reset
```

## Terminal support

OSC color sequences are supported by most modern terminals, including Ghostty, iTerm2, Kitty, WezTerm, Alacritty, Foot, and Windows Terminal.

## License

MIT
npm package: @ivoryio/ivory-react-scripts
Description: Create React App scripts for Ivory
Latest version: 0.9.3
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# react-scripts

This package includes scripts and configuration used by [Create React App](https://github.com/facebook/create-react-app).<br>
Please refer to its documentation:

- [Getting Started](https://facebook.github.io/create-react-app/docs/getting-started) – How to create a new app.
- [User Guide](https://facebook.github.io/create-react-app/) – How to develop apps bootstrapped with Create React App.