open-index/open-npm huggingface dataset:
npm package: @phparkle/scrollspy
Description: A simple lightweight JavaScript library without jQuery or any other dependencies to handle scroll spying on static webpages.
Author: Siddharth Subramanian
Latest version: 1.1.0

# @sidsbrmnn/scrollspy

A simple lightweight JavaScript library without jQuery or any other dependencies to handle scroll spying on static webpages.

## Install

1. via NPM

    Install it using npm

    ```bash
    npm install --save @sidsbrmnn/scrollspy
    ```

2. Use the minified script from unpkg.com

    ```html
    <script src="https://unpkg.com/@sidsbrmnn/scrollspy@1.0.4/dist/scrollspy.min.js"></script>
    ```

## Usages

Easy for using, syntax just like this:

```html
scrollSpy(menu, options)
```

This little plugin will add `active` class into your existing menu item when you scroll your page to a matched section by ID.
If you are giving it a try, make sure that you:

1. Added CSS for `active` class in your menu item. Because, this plugin do NOT include CSS.

2. Create your sections.

    Example: `<section id="first-section">...</section>`

3. Added an attribute which is an section ID into your menu items. Default is `href`.

    Example: `"href"="#first-section"`.
    You also replace `href` with the other name by `hrefAttribute` in `options`.

### Arguments

1. The `menu` is query selector to your menu. It is `string` or `HTMLElement` instance.

2. The `options` is optional. It is type of `object` which contains properties below:

| Name               | Type     | Default       | Description                                              |
|--------------------|:---------|:--------------|:---------------------------------------------------------|
| `sectionSelector`  | string   | `section`     | Query selector to your sections                          |
| `targetSelector`   | string   | `a`           | Element will be added active class                       |
| `offset`           | Number   | 0             | Offset number                                            |
| `hrefAttribute`    | string   | `href`        | The menu item's attribute name which contains section ID |
| `activeClass`      | string   | `active`      | Active class name will be added into `targetSelector`    |

### ES6

```js
import scrollSpy from '@sidsbrmnn/scrollspy'

const options = {
    sectionSelector: 'section',  // Query selector to your sections
    targetSelector: '.nav-link', // Query selector to your elements that will be added `active` class
    offset: 100                  // Menu item will active before scroll to a matched section 100px
}

// Initialize
scrollSpy(document.getElementById('navMain'), options)

// Shorter way
scrollSpy('#navMain', options)
```

### Script tag

```html
<script src="/path/to/dist/scrollspy.min.js"></script>
<script>
    window.onload = function () {
        scrollSpy('#navMain', {
            sectionSelector: 'section',
            targetSelector: '.nav-link',
            offset: 100
        });
    }

</script>
```

## Licence

[MIT](LICENSE)
npm package: @phpsoftbox/forms
Description: Компонент для отрисовки форм из компонентов:  - https://github.com/phpsoftbox/forms - https://github.com/phpsoftbox/db-config - https://github.com/phpsoftbox/requisites
Latest version: 1.2.1

# @phpsoftbox/forms
Компонент для отрисовки форм из компонентов: 
- https://github.com/phpsoftbox/forms
- https://github.com/phpsoftbox/db-config
- https://github.com/phpsoftbox/requisites

React-утилиты для рендера schema-driven форм поверх `@phpsoftbox/react-softbox`.

## Экспорт

- `DynamicFormFields`
- `buildDynamicFormData`
- `isDynamicFieldRequired`
- `isDynamicValueFilled`
- вспомогательные типы/хелперы
npm package: @phpsoftbox/pushr
Description: Браузерный клиент для подключения к Pushr WebSocket серверу.
Latest version: 0.2.4

# @phpsoftbox/pushr

Браузерный клиент для подключения к Pushr WebSocket серверу.

## Установка

```bash
yarn add @phpsoftbox/pushr
```

## Быстрый старт

Нужен backend эндпоинт, который выдаёт подпись для подключения.

```ts
import { PushrClient } from '@phpsoftbox/pushr';

const client = new PushrClient({
  url: 'wss://pushr.example.com',
  getConnectSignature: async () => {
    const res = await fetch('/broadcast/connect');
    return await res.json();
  },
  getChannelAuth: async (channel, socketId, channelData) => {
    const res = await fetch('/broadcast/auth', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        socket_id: socketId,
        channel,
        channel_data: channelData,
      }),
    });

    return await res.json();
  },
  autoReconnect: true,
});

await client.connect();

client.on('connection', (message) => {
  console.log('socket_id', message.socket_id);
});

await client.subscribe('news');
await client.subscribe('private.user.10');

client.onEvent('news', 'message', (data) => {
  console.log(data);
});
```

## Сервис для браузера

Если нужен готовый singleton с автоподключением и счётчиком подписок, используйте сервис.

```ts
import { createPushrService } from '@phpsoftbox/pushr';

const pushr = createPushrService({
  resolveConfig: () => ({
    url: 'wss://pushr.example.com',
    connect: '/broadcast/connect',
    auth: '/broadcast/auth',
  }),
});

await pushr.ensureConnected();
await pushr.subscribe('news');
```

По умолчанию сервис использует `fetch` и ищет конфиг в `window.__APP_CONFIG__` (если он есть).
При необходимости можно передать собственный `request` (например, на axios).

## React hook

```ts
import { createPushrService } from '@phpsoftbox/pushr';
import { usePushrEvent } from '@phpsoftbox/pushr/react';

const pushr = createPushrService({
  resolveConfig: () => ({ url: 'wss://pushr.example.com' }),
});

usePushrEvent({
  service: pushr,
  channel: 'news',
  event: 'message',
  onMessage: (payload) => console.log(payload),
});
```

## Подключение и подпись

`getConnectSignature` должен вернуть объект:

```ts
type PushrConnectSignature = {
  appId: string;
  timestamp: number;
  signature: string;
  url?: string;
};
```

`url` можно вернуть, если сервер зависит от окружения (dev/prod).

## Авторизация приватных каналов

Для каналов `private.*`/`presence.*` клиент вызывает `getChannelAuth`.
Ответ должен содержать `auth` и опционально `channelData`:

```ts
type PushrChannelAuth = {
  auth: string;
  channelData?: unknown;
};
```

## Разница private и presence

- `private.*` — только проверка доступа к каналу.
- `presence.*` — проверка доступа плюс данные участника (`channelData`, чаще всего `user_id` и имя).
- В текущем Pushr сервер не шлёт автоматические события join/leave для presence.

## События

- `connection` — сервер прислал `socket_id`
- `event` — сообщение из канала
- `subscribed` / `unsubscribed`
- `error`
- `disconnect`
npm package: @phpwyl123/logicflow-designer
Description: A Vue2 component for LogicFlow flowchart designer
Author: Your Name
Latest version: 1.0.0

# LogicFlow Designer

一个基于 LogicFlow 和 Vue2 的流程图设计器组件库，可以轻松集成到你的 Vue 项目中。

## 特性

- 基于 LogicFlow 实现，支持多种节点类型
- 预定义多种节点类型（开始节点、赋值节点、决策节点等）
- 支持自定义节点和边
- 内置属性面板和工具栏
- 支持导出和导入流程数据

## 安装

```bash
npm install logicflow-designer
```

## 使用方法

### 全局注册

```javascript
import Vue from 'vue';
import LogicFlowDesigner from 'logicflow-designer';

Vue.use(LogicFlowDesigner);
```

然后在组件中使用：

```vue
<template>
  <div>
    <LogicFlowDesigner 
      :title="flowTitle"
      :flowData="flowData"
      :options="lfOptions" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      flowTitle: '我的流程图',
      flowData: null, // 流程图数据
      lfOptions: {}   // LogicFlow 配置选项
    }
  }
}
</script>
```

### 局部注册

```vue
<template>
  <div>
    <LogicFlowDesigner 
      :title="flowTitle"
      :flowData="flowData"
      :options="lfOptions" />
  </div>
</template>

<script>
import { LogicFlowDesigner } from 'logicflow-designer';

export default {
  components: {
    LogicFlowDesigner
  },
  data() {
    return {
      flowTitle: '我的流程图',
      flowData: null,
      lfOptions: {}
    }
  }
}
</script>
```

### 获取和设置数据

可以通过 ref 调用组件方法：

```vue
<template>
  <div>
    <LogicFlowDesigner 
      ref="lfDesigner"
      :title="flowTitle" />
    <button @click="getFlowData">获取数据</button>
  </div>
</template>

<script>
import { LogicFlowDesigner } from 'logicflow-designer';

export default {
  components: {
    LogicFlowDesigner
  },
  methods: {
    getFlowData() {
      const data = this.$refs.lfDesigner.$_getData();
      console.log(data);
    }
  }
}
</script>
```

## 属性 (Props)

| 属性名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| title | String | '' | 流程图标题 |
| flowData | Object | null | 流程图数据 |
| options | Object | {} | LogicFlow 配置选项 |

## 方法

| 方法名 | 参数 | 返回值 | 说明 |
|--------|------|--------|------|
| $_getData | 无 | Object | 获取当前流程图数据 |

## 构建

如果你想自己构建这个包:

```bash
# 安装依赖
npm install

# 构建为库
npm run build-bundle
```

## License

MIT
npm package: @phragon-react/svg-icon-feather
Description: Extender for the `@phragon-react/svg-icon` package.
Author: phragon@websoftlab.com
Latest version: 0.0.3

# @phragon-react/svg-icon-feather

Extender for the `@phragon-react/svg-icon` package.

Icon maker for the https://github.com/feathericons/feather icon collection.\
Feather website: https://feathericons.com/ \
Feather version: `4.29.0`

## ❯ Install

```
$ npm install --save react @phragon-react/svg-icon @phragon-react/svg-icon-feather
```

## Usage

```javascript
import { addSvgIcons, SvgIcon } from "@phragon-react/svg-icon"
import { addFeatherSvgIconMaker } from "@phragon-react/svg-icon-feather";

// add maker
addFeatherSvgIconMaker();

// load icons
import("@phragon-react/svg-icon-feather/feather-icons.json")
    .then(({ icons }) => {
	    addSvgIcons("feather", icons);
    })
    .catch(error => {
	    console.error("Feather icons load failure", error);
    });

// usage icon
function SomeMenuIconComponent() {
	return (
		<SvgIcon icon="menu" />
	);
}
```
npm package: @phragon-react/svg-icon-lucide
Description: Extender for the `@phragon-react/svg-icon` package.
Author: phragon@websoftlab.com
Latest version: 0.396.0

# @phragon-react/svg-icon-lucide

Extender for the `@phragon-react/svg-icon` package.

Icon maker for the https://github.com/lucide-icons/lucide icon collection.\
Lucide website: https://lucide.dev/ \
Lucide version: `0.211.0`

## ❯ Install

```
$ npm install --save react @phragon-react/svg-icon @phragon-react/svg-icon-lucide
```

## Usage

```javascript
import { addSvgIcons, SvgIcon } from "@phragon-react/svg-icon"
import { addLucideSvgIconMaker } from "@phragon-react/svg-icon-lucide";

// add maker
addLucideSvgIconMaker();

// load icons
import("@phragon-react/svg-icon-lucide/lucide-all.json")
    .then(({ icons }) => {
	    addSvgIcons("lucide", icons);
    })
    .catch(error => {
	    console.error("lucide icons load failure", error);
    });

// usage icon
function SomeMenuIconComponent() {
	return (
		<SvgIcon icon="menu" />
	);
}
```
npm package: @phragon-react/svg-icon-tabler
Description: Extender for the `@phragon-react/svg-icon` package.
Author: phragon@websoftlab.com
Latest version: 0.0.1

# @phragon-react/svg-icon-tabler

Extender for the `@phragon-react/svg-icon` package.

Icon maker for the https://github.com/tabler/tabler-icons icon collection.\
Tabler website: https://tabler-icons.io/ \
Tabler version: `2.17.0`

<p align="center">
<img src="https://raw.githubusercontent.com/websoftlab/phragon-react/master/packages/svg-icon-tabler/tabler-icons.png" width="838" alt="Tabler Icons" />
</p>

## ❯ Install

```
$ npm install --save react @phragon-react/svg-icon @phragon-react/svg-icon-tabler
```

## Usage

```javascript
import { addSvgIcons, SvgIcon } from "@phragon-react/svg-icon"
import { addTablerSvgIconMaker } from "@phragon-react/svg-icon-tabler";

// add maker
addTablerSvgIconMaker();

// add all stroke icons
import("@phragon-react/svg-icon-tabler/tabler-all-stroke.json")
	.then(({icons}) => {
		addSvgIcons("tabler", icons);
	})
	.catch(error => {
		console.error("Icon (stroke) load failure", error);
	});

// add all filled icons
import("@phragon-react/svg-icon-tabler/tabler-filled.json")
	.then(({icons}) => {
		addSvgIcons("tabler-filled", icons);
	})
	.catch(error => {
		console.error("Icon (filled) load failure", error);
	});

// usage icon
function SomeMenuIconComponent() {
	return (
		<SvgIcon icon="menu" />
	);
}
```
npm package: @phragon-react/use-create-context
Description: Helper hooks for react createContext function and useContext hook
Author: phragon@websoftlab.com
Latest version: 0.0.1

# @phragon-react/use-create-context

Helper hooks for react createContext function and useContext hook

## ❯ Install

```
$ npm install --save @phragon-react/use-create-context
```

## Usage

```javascript
import { createContext, createStrictContext } from "@phragon-react/use-create-context";

const [Provider, useContext] = createContext();
const [StrictProvider, useStrictContext] = createStrictContext();

function Foo() {
	return (
		<Provider value={"test"}>
			<Bar />
		</Provider>
	);
}

function FooStrict() {
	return (
		<StrictProvider value={"test"}>
			{/* Successfull render, <Bar /> is null */}
			<Bar />
			<BarStrict />
		</StrictProvider>
	);
}

function FooError() {
	return (
		<>
			{/* Successfull render, <Bar /> is null */}
			<Bar />
			{/* Render failed */}
			<BarStrict />
		</>
	);
}

function Bar() {
	const context = useContext();
	return (
		<div>{context}</div>
	);
}

function BarStrict() {
	const context = useStrictContext();
	return (
		<div>{context}</div>
	);
}
```
npm package: @phragon-react/use-fork-ref
Description: The project is under construction, the description will be later
Author: phragon@websoftlab.com
Latest version: 0.0.2

# @phragon-react/use-fork-ref

The project is under construction, the description will be later

## ❯ Install

```
$ npm install --save @phragon-react/use-fork-ref
```
npm package: @phragon-react/use-lexicon-package-loader
Description: The project is under construction, the description will be later
Author: phragon@websoftlab.com
Latest version: 0.0.2

# @phragon-react/use-lexicon-package-loader

The project is under construction, the description will be later

## ❯ Install

```
$ npm install --save @phragon-react/use-lexicon-package-loader
```
npm package: @phragon-react/use-transition-end
Description: The project is under construction, the description will be later
Author: phragon@websoftlab.com
Latest version: 0.0.2

# @phragon-react/use-transition-end

The project is under construction, the description will be later

## ❯ Install

```
$ npm install --save @phragon-react/use-transition-end
```
npm package: @phragon-util/global-var
Description: Helper for global variables (used on PhragonJS projects).
Author: phragon@websoftlab.com
Latest version: 0.0.2

# @phragon-util/global-var

Helper for global variables (used on PhragonJS projects).

## ❯ Install

```
$ npm install --save @phragon-util/global-var
```

## All variables:

```typescript
// Environment Mode - Developer
const __DEV__: boolean;

// Environment Mode - Developer
// Script was run on the client-server side (Webpack)
const __DEV_SERVER__: boolean;

// Environment Mode - Production
const __PROD__: boolean;

// Bundle type
const __BUNDLE__: string;

// Server side rendering is used
const __SSR__: boolean;

// The script was run on the server side (backend)
const __SRV__: boolean;

// The script was run on the client side (front)
const __WEB__: boolean;

// Environment mode
const __ENV__: "production" | "development";
```

## Functions:

```typescript
import { defineGlobal, __isDev__, __isProd__, __isWeb__, __isSrv__, __env__ } from "@phragon-util/global-var";

// Define all global variables if they don't exist. 
// This function is automatically added to the PhragonJS build.
// Works only on the server side (NodeJS), in the client side the functions and the variables 
// will be removed and replaced with static values.
defineGlobal();

// Environment Mode - Developer
__isDev__();

// Environment Mode - Production
__isProd__();

// The script was run on the client side (front)
__isWeb__();

// The script was run on the server side (backend)
__isSrv__();

// Environment mode
__env__();
```
npm package: @phragon-util/mobx-state-value
Description: The project is under construction, the description will be later
Author: phragon@websoftlab.com
Latest version: 0.0.2

# @phragon-util/mobx-state-value

The project is under construction, the description will be later

## ❯ Install

```
$ npm install --save @phragon-util/mobx-state-value
```
npm package: @phragon-util/plain-object
Description: Utilities for plain javascript object
Author: phragon@websoftlab.com
Latest version: 0.0.4

# @phragon-util/plain-object

Utilities for plain javascript object

## ❯ Install

```
$ npm install --save @phragon-util/plain-object
```

## Usage

### Is plain object

> Returns true if an object was created by the Object constructor, or Object.create(null).\
> Function based on https://github.com/jonschlinkert/is-plain-object package, but does not return true if the object is null.

```javascript
import { isPlainObject } from "@phragon-util/plain-object"

isPlainObject(Object.create({}));
// is: true
isPlainObject(Object.create(Object.prototype));
// is: true
isPlainObject({foo: 'bar'});
// is: true
isPlainObject({});
// is: true
isPlainObject(null);
// is: false
```

### Clone plain object

> Function for deep cloning plain objects.

```javascript
import { clonePlainObject } from "@phragon-util/plain-object"

const original = { foo: 'bar', bar: { foo: '' } };
const clone = clonePlainObject(original);

original.bar.foo = "changed";

console.log(original);
// is: { foo: 'bar', bar: { foo: 'changed' } }

console.log(clone);
// is: { foo: 'bar', bar: { foo: '' } }
```
npm package: @phragon-util/proof
Description: Functions for validating an expression or variable. A value is not valid if it is null, undefined, false. If value is a number it must be finite and not NaN. An empty string and a zero number is allowed.
Author: phragon@websoftlab.com
Latest version: 0.0.3

# @phragon-util/proof

Functions for validating an expression or variable.
A value is not valid if it is null, undefined, false.
If value is a number it must be finite and not NaN.
An empty string and a zero number is allowed.

> This library is built for the PhragonJS framework and uses the `@phragon-util/global-var` package. 
> If you are not using PhragonJS, you should add a cleaner for `__*__` global variables and functions 
> to your build manager (Webpack, Rollup, etc.)

## ❯ Install

```
$ npm install --save @phragon-util/proof
```

## Usage

All functions always return void.\
The `warning` function and the `warningOnce` function throw an error and catch it, 
you can use this behavior for debugging (only in production mode).

```javascript
import { invariant, warning, warningOnce } from "@phragon-util/proof";

// throw Error("some message")
invariant(false, "some message");

// "some message" warning in console
warning(false, "some mesage");

// "some message" warning in console
// just one repeat for "my-key"
warningOnce("my-key", false, "some message");
```
npm package: @phragon-util/reg-exp-escape
Description: The project is under construction, the description will be later
Author: phragon@websoftlab.com
Latest version: 0.0.2

# @phragon-util/reg-exp-escape

The project is under construction, the description will be later

## ❯ Install

```
$ npm install --save @phragon-util/reg-exp-escape
```
npm package: @phragon-util/script
Description: Workspace project builder. Uses babel to build and prettier to reformat source code.
Author: phragon@websoftlab.com
Latest version: 0.0.7

# @phragon-util/script

Workspace project builder.
Uses babel to build and prettier to reformat source code.

> The project is under construction, the full description will be later.

## ❯ Install

```
$ npm install --save @phragon-util/script
```

## Commands

Warning!\
Config files: `.prettierrc.json`, `babel.config.js`, `phragon-build.conf.json` is required

```shell
# create boilerplate workspace package
phragon-script boilerplate

# prettier reformat code
phragon-script prettier

# increment new package version
phragon-script increment

# build workspace package(s)
phragon-script build

# npm publish
phragon-script release
```

## Builder config file

The file name is `phragon-build.conf.json`

```json
{
	"semver": {
		"version": "0.0.1"
	},
	"workspace": {
		"name": "@your-package-name",
		"path": "packages"
	},
	"bundle": {
		"out": "build",
		"tmp": "build-tmp",
		"author": "your@email.com",
		"repository": {
			"type": "git",
			"url": "https://github.com/your_git_user/your_git_package.git"
		},
		"license": "MIT",
		"licenseText": "Text for LICENSE file"
	},
	"release": {
		"global": {
			"user": "your_npm_login"
		}
	}
}
```
npm package: @phragon/extender-css
Description: Adds the `css` import to the PhragonJS project. Used only for the webpack builder.
Author: phragon@websoftlab.com
Latest version: 0.1.0

# @phragon/extender-css

Adds the `css` import to the PhragonJS project. Used only for the webpack builder.

## ❯ Install

```shell
# this is not necessary, once added to the configuration file, the dependencies are installed automatically
$ npm install --save @phragon/extender-css
```

## Usage

> Add an extension method to `phragon.config.ts`

```typescript
import type { BuilderI } from "phragon";

export default async function config(builder: BuilderI) {
	builder
		// extender
		.extender("css")

		// config
		.phragon
		.lexicon("en")
		.render("react", false)
		.publicPath("./public");
}
```

In typescript or javascript files:

```typescript
import "./file.css"
```

Or module:

```typescript
import classes from "./file.component.css"
```
npm package: @phragon/extender-prettier
Description: Adds the `prettier` formatter to the PhragonJS project.
Author: phragon@websoftlab.com
Latest version: 0.1.2

# @phragon/extender-prettier

Adds the `prettier` formatter to the PhragonJS project.

## ❯ Install

```shell
# this is not necessary, once added to the configuration file, the dependencies are installed automatically
$ npm install --save @phragon/extender-prettier
```

## Usage

> Add an extension method to `phragon.config.ts`\
> If you want to use the `prettier` version installed globally, add to the configuration: `{ version: "global" }`

```typescript
import type { BuilderI } from "phragon";
import type { ExtenderPrettierOptions } from "@phragon/extender-prettier";

export default async function config(builder: BuilderI) {
	builder
		// extender
		.extender("prettier", {
			parser: [/* additional extension */],
			// version: "global" | "latest" | "^2.7.1"
		} as ExtenderPrettierOptions)

		// config
		.phragon
		.lexicon("en")
		.render("react", false)
		.publicPath("./public");
}
```
npm package: @phragon/extender-resource
Description: Adds the images and fonts import to the PhragonJS project. Used only for the webpack builder.
Author: phragon@websoftlab.com
Latest version: 0.1.0

# @phragon/extender-resource

Adds the images and fonts import to the PhragonJS project. Used only for the webpack builder.

## ❯ Install

```shell
# this is not necessary, once added to the configuration file, the dependencies are installed automatically
$ npm install --save @phragon/extender-resource
```

> Add an extension method to `phragon.config.ts`\

```typescript
import type { BuilderI } from "phragon";

export default async function config(builder: BuilderI) {
	builder
		// extender
		.extender("resource")

		// config
		.phragon
		.lexicon("en")
		.render("react", false)
		.publicPath("./public");
}
```
npm package: @phragon/extender-sass
Description: Adds the `sass` import to the PhragonJS project. Used only for the webpack builder.
Author: phragon@websoftlab.com
Latest version: 0.1.0

# @phragon/extender-sass

Adds the `sass` import to the PhragonJS project. Used only for the webpack builder.

## ❯ Install

```shell
# this is not necessary, once added to the configuration file, the dependencies are installed automatically
$ npm install --save @phragon/extender-sass
```

> Add an extension method to `phragon.config.ts`\
> You must use `sass` with the `css` extender and after the `css` extender!

```typescript
import type { BuilderI } from "phragon";

export default async function config(builder: BuilderI) {
	builder
		// extender
		.extender("css")
		.extender("sass")

		// config
		.phragon
		.lexicon("en")
		.render("react", false)
		.publicPath("./public");
}
```

In typescript or javascript files:

```typescript
import "./file.scss"
```

Or module:

```typescript
import classes from "./file.component.scss"
```
npm package: @phragon/plugin-sequelize
Description: The project is under construction, the description will be later
Author: phragon@websoftlab.com
Latest version: 0.1.0-beta.29

# @phragon/plugin-sequelize

The project is under construction, the description will be later

## ❯ Install

```
$ npm install --save @phragon/plugin-sequelize
```
npm package: @phrase/i18next-backend
Description: Phrase Strings OTA i18next backend
Author: Phrase
Latest version: 1.3.3

# i18nextPhraseBackend - Phrase Strings backend for i18next

## Description

This small library implements an example [backend](https://www.i18next.com/overview/plugins-and-utils#backends) for [`i18next`](https://www.i18next.com/) which retrieves the translations from Phrase OTA releases. The distribution should be created for `i18next` platform.

## Usage

A demo project can be found at https://github.com/phrase/ota-web-demo

### Basic usage

```
npm install --save @phrase/i18next-backend
```

```javascript
import i18n from "i18next";
import { I18nextPhraseBackend } from "@phrase/i18next-backend";

i18n
  .use(I18nextPhraseBackend)
  .init({
    fallbackLng: 'en',
    backend: {
      distribution: 'DISTRIBUTION_ID',
      secret: 'YOUR_ENVIRONMENT_SECRET',
      appVersion: '1.0.0',
    }
  });
```

### Options

The backend accepts several options:

* `distribution` (required): The ID of your Phrase Strings OTA distribution
* `secret` (required): The secret token of your Phrase Strings OTA distribution. There are different secrets for `development` (i.e. beta) and `production` environments
* `appVersion`: You can prevent some OTA releases from being serverd to certain app versions by providing minimum and maximum app version in Phrase Strings
* `cacheExpirationTime`: See [Caching](#caching) below
* `host`: By default, this library uses EU instance of Phrase Strings, if you use US DC, set this to `https://ota.us.phrase.com`
* `format`: By default this library uses the i18next format, if you use i18next v4 (for the new pluralization resolution strategy), set this to `i18next_4`

## Caching

The library is caching translations and won't check for new translations for 5 minutes. This can be configured by setting the `cacheExpirationTime` option in the backend configuration for testing purposes. It's recommended to use at least 5 minutes in production.

```javascript
i18n
  .use(I18nextPhraseBackend)
  .init({
    fallbackLng: 'en',
    backend: {
      distribution: 'DISTRIBUTION_ID',
      secret: 'YOUR_ENVIRONMENT_SECRET',
      appVersion: '1.0.0',
      cacheExpirationTime: 60 * 5, // time in seconds
    }
  });
```
npm package: @phri/rome-design-system
Description: This project contains SCSS files for creating the Rome design system. This project also uses storybook to provide a good interface for viewing and modifying the design system.
Author: Dat Nguyen
Latest version: 1.0.0-beta.3

# Rome.DesignSystem

## Introduction

This project contains SCSS files for creating the Rome design system. This project also uses storybook to provide a good interface for viewing and modifying the design system.

## Requirements

Node.js 18.14.0 is required.

## How to Use

Run `npm install` to install the required NPM packages.

### Compiling SCSS files

Run `npm run build-sass` to compile and generate CSS files in the ./dist directory.

### Running Storybook

Run `npm run storybook` to startup storybook. Storybook will build and run automatically in the browser

## Contributing

For contributing to the design system styles, please look at the scss files in the styles folder.

For contributing to the design system documentation in Storybook, please look at the .stories.js files in the stories folder.
npm package: @phrixothrixa/angular-redux-router
Description: Keep your Angular 2+ router state in Redux.
Author: Dag Stuan
Latest version: 10.1.1

# @angular-redux/router

[![npm version](https://img.shields.io/npm/v/@angular-redux/router.svg)](https://www.npmjs.com/package/@angular-redux/router)
[![downloads per month](https://img.shields.io/npm/dm/@angular-redux/router.svg)](https://www.npmjs.com/package/@angular-redux/router)

Bindings to connect @angular/router to @angular-redux/core

## Setup

1.  Use npm to install the bindings:

```
npm install @angular-redux/router --save
```

2.  Use the `routerReducer` when providing `Store`:

```ts
import { combineReducers } from 'redux';
import { routerReducer } from '@angular-redux/router';

export default combineReducers<IAppState>({
  // your reducers..
  router: routerReducer,
});
```

3.  Add the bindings to your root module.

```ts
import { NgModule } from '@angular/core';
import { NgReduxModule, NgRedux } from '@angular-redux/core';
import { NgReduxRouterModule, NgReduxRouter } from '@angular-redux/router';
import { RouterModule } from '@angular/router';
import { routes } from './routes';

@NgModule({
  imports: [
    RouterModule.forRoot(routes),
    NgReduxModule,
    NgReduxRouterModule.forRoot(),
    // ...your imports
  ],
  // Other stuff..
})
export class AppModule {
  constructor(ngRedux: NgRedux<IAppState>, ngReduxRouter: NgReduxRouter) {
    ngRedux.configureStore(/* args */);
    ngReduxRouter.initialize(/* args */);
  }
}
```

## What if I use Immutable.js with my Redux store?

When using a wrapper for your store's state, such as Immutable.js, you will need to change two things from the standard setup:

1.  Provide your own reducer function that will receive actions of type `UPDATE_LOCATION` and return the payload merged into state.
2.  Pass a selector to access the payload state and convert it to a JS object via the `selectLocationFromState` option on `NgReduxRouter`'s `initialize()`.

These two hooks will allow you to store the state that this library uses in whatever format or wrapper you would like.

## What if I have a different way of supplying the current URL of the page?

Depending on your app's needs. It may need to supply the current URL of the page differently than directly
through the router. This can be achieved by initializing the bindings with a second argument: `urlState$`.
The `urlState$` argument lets you give `NgReduxRouter` an `Observable<string>` of the current URL of the page.
If this argument is not given to the bindings, it defaults to subscribing to the `@angular/router`'s events, and
getting the URL from there.

## Examples

- [Example-app: An example of using @angular-redux/router along with the other companion packages.](https://github.com/angular-redux/platform/tree/master/packages/example-app)