open-index/open-npm huggingface dataset:
npm package: @itcase/common
Description: Common features like requests, utils
Latest version: 1.2.41

### Requests functions
  * ``` formatURL(url, addProtocol) ```
  * ``` sendAxiosRequest({ config, onSuccess, onError }) ```
  * ``` async sendServerSideRequest(urls) ```

### Utils functions
  * ``` createFileFromDataURL(fileName = 'file', dataURL) ```
  * ``` getLanguageProp(item = {}, key = '', language) ```

### Note
  * Use arrow function for some helpers and utils:
  ``` const someUtilFunction = (configURL) => {} ```
  * Use function for main things as components and hooks:
  ``` function SomeComponent() {}"  and "function useSomeThings() {} ```
  * Set "export" things always on bottom of file:
  ```
  import things from 'some/path/things'

  ...
  <<<code>>>
  ...

  export { someNamedTing, someUtilFunction }
  export default MainThing
  ```
npm package: @itcase/config
Description: ITCase Config
Author: ITCase
Latest version: 1.6.53

# ITCase Config

Набор готовых конфигураций для инструментов разработки, используемых в проектах ITCase. Этот пакет содержит стандартизированные настройки для commitlint, lint-staged, PostCSS, semantic-release и SVGR.

## Установка

```bash
npm install --save-dev @itcase/config
```

## Доступные конфигурации

Пакет предоставляет следующие конфигурации:

- **Commitlint** — проверка формата сообщений коммитов
  - `createCommitlintProjectConfig(SCOPES)` — для разработки
  - `createCommitlintReleaseConfig(SCOPES)` — для релизных веток
  - `commitlint/commitizenAdapter.js` — адаптер Commitizen (type → scope → subScope → subject)

- **Husky** — husky-hooks

- **Lint-staged** — запуск линтеров для измененных файлов
  - `lint-staged/index.js` — базовая конфигурация
  - `lint-staged-ts/index.js` — с проверкой типов TypeScript

- **PostCSS** — обработка CSS
  - `postcss/index.js` — стандартная конфигурация
  - `postcss/nextVite.js` — для Next.js/Vite проектов

- **Semantic Release** — автоматическое управление версиями
  - `semantic-release/config.js` — конфигурация
  - `semantic-release/index.js` — стандартная конфигурация
  - `semantic-release/indexLerna.js` — для Lerna монорепозиториев
  - `semantic-release/indexVSMarketplace.js` — для VS Code расширений

- **SVGR** — преобразование SVG в React компоненты
  - `svgr/index.js` — базовая конфигурация
  - `svgr/webpack.js` — интеграция с Webpack

## Подключение Commitlint

1. Установите зависимости в проекте:

```bash
npm install --save-dev @itcase/config @commitlint/cli @commitlint/config-conventional conventional-changelog-conventionalcommits
```

2. Создайте в корне проекта файл `commitlint.config.mjs`:

```js
import {
  createCommitlintProjectConfig,
  createCommitlintReleaseConfig,
} from '@itcase/config/commitlint/index.js'

const SCOPES = {
  auth: [],
  common: [],
  dashboard: [],
  logbook: ['events', 'filters'],
  map: ['layers', 'controls', 'markers'],
  report: ['monitoring', 'analytics', 'export', 'filters'],
  other: [],
}

export default process.env.RELEASE_BRANCH === 'true'
  ? createCommitlintReleaseConfig(SCOPES)
  : createCommitlintProjectConfig(SCOPES)
```

3. Подключите проверку в husky (например, в `.husky/commit-msg`):

```bash
npx commitlint --edit "$1"
```

4. **(Опционально)** Интерактивное оформление коммитов через Commitizen. Установите:

```bash
npm install --save-dev commitizen @commitlint/cz-commitlint
```

Добавьте файл `.cz.json`

```json
{ "path": "@itcase/config/commitlint/commitizenAdapter.js" }
```
npm package: @itcase/cursor-rules
Description: Cursor Rules for ITCase projects
Author: ITCase
Latest version: 1.0.5

# ITCase Cursor Rules

Cursor Rules для проектов ITCase. Автоматически устанавливается при установке пакета через npm postinstall скрипт.

## Установка

```bash
npm install --save-dev @itcase/cursor-rules
```

После установки содержимое `.cursor/rules` будет автоматически скопировано в `.cursor/rules` вашего проекта.

## Использование

Директория `.cursor/rules` будет создана в корне вашего проекта при установке пакета. Существующие файлы не будут перезаписаны - добавляются только новые файлы.

Чтобы обновить правила до последней версии:

1. Удалите существующую директорию `.cursor/rules` в корне проекта
2. Переустановите пакет: `npm install --save-dev @itcase/cursor-rules`

## Что включено

Cursor Rules содержат следующие правила и рекомендации:

### Code Style
- JavaScript/TypeScript: 2 пробела для отступов, ES modules
- Общие правила: 4 пробела для отступов, UTF-8, LF окончания строк
- Расширения файлов: `.js` для ES modules (при `"type": "module"`), `.cjs` для CommonJS

### Git
- Формат коммитов: Conventional Commits
- Скоупы: email, error, webview, gulp, docs, other
- Защита веток: main, master, develop

### Code Quality
- ESLint, Prettier, Stylelint конфигурации из @itcase/lint
- Исправление ошибок линтинга перед коммитом

### Best Practices
- Организация кода
- Обработка ошибок
- Производительность
- Безопасность
- Документация

## Разработка

Для разработки этого пакета:

```bash
# Установка зависимостей
npm install

# Линтинг
npm run lint

# Тестирование postinstall скрипта
npm run postinstall
```

## Лицензия

MIT
npm package: @itcase/forms
Description: Forms fields, inputs, etc.
Latest version: 1.1.59

# Forms components and functions

## Fields
* **FormFieldCheckbox**
* **FormFieldDatePicker**
* **FileInput** and **FileField**
* **InputTextField**
* **RadioGroupField**
* **SelectButtonField**
* **FormFieldSelect**, **CheckboxOption** and **ValueContainer**
* **FormFieldTextarea**

## Field wrapper
* **FieldWrapper**
* **FieldWrapperStandalone**

## Form
* **FinalForm**

## Form header
* **FormHeader**

## Fields generator
* **controlTypes** - enum of fields
* **generateField** - function for generate field with specified type

## Utils
* **focusOnError**
* **focusOnErrorDecorator**
* **setErrorsMutator**
* **sendFormDataToServer**
* **useFormState**

# Hooks
* **useYupValidationSchema**

# Validators
* **emailValidation**
* **addRequiredFieldsParamToSchema**
npm package: @itcase/gulp
Description: Gulp Config
Author: ITCase
Latest version: 1.1.30

# ITCase Gulp

Presets of gulp task

## Installation

```bash
$ npm i -D @itcase/gulp gulp postcss
```

## Usage

1. Create `gulpfile.mjs`
2. Set list of tasks, example: `email`
3. Available tasks located in the `./tasks` folder
4. Create `postcss.config.js`
5. Optionally you can add commands in `Makefile`

`gulpfile.mjs`

```js
import gulpTasks, {
  email,
  emailTemplates,
  errorTemplates,
  watchEmail,
  watchErrors,
} from '@itcase/gulp'

export default gulpTasks
export { email, emailTemplates, errorTemplates, watchEmail, watchErrors }
```

`postcss.config.js`

```js
const postcssConfig = require('@itcase/gulp/postcss/index.cjs')

module.exports = postcssConfig
```

`MakeFile`

```make
email:
  gulp emailTemplates --path templates/emails/ $(ARGV)
  gulp emailTemplates --path api/templates/api/emails/ $(ARGV)

email-prod:
  gulp emailTemplates --path templates/emails/ --production
  gulp emailTemplates --path api/templates/api/emails/ --production

error:
	gulp errorTemplates
```

## List of tasks

List of available tasks is called by the command `gulp --tasks`

### `gulp email`


### `gulp emailTemplates`

Create email templates with inline CSS styles

Options:
- `--cssPath` –  path to css files, `default: static/emails/css/`
- `--path` – path to template folder
- `--targetPath` – path to destination folder for processed templates 


```shell
  gulp emailTemplates --path templates/emails/
  gulp emailTemplates --path api/templates/api/emails/
```

### `gulp errorTemplates`

Options:
- `--cssPath` –  path to css files, `default: static/errors/css/`
- `--path` – path to template folder, `default: static/errors/`
- `--targetPath` – path to destination folder for processed templates 

### `gulp pdf`

Options:
- `--cssPath` – path to css files, `default: static/pdf/`
- `--path` – path to template folder, `default: api/templates/api/document/`
- `--targetPath` – path to destination folder for processed templates 

### `gulp webview`

Options:
- `--cssPath` –  path to css files, `default: static/webview/`
- `--targetPath` – path to destination folder for processed templates 

### `gulp watchEmail`

### `gulp watchErrors`
npm package: @itcase/helper
Description: ## CLI Utility for generating components and other project blocks.
Author: ITCase
Latest version: 1.0.6

# @itcase/helper

## CLI Utility for generating components and other project blocks.

1. Go to the directory of your `itcase-helper` package and execute:

```sh
cd itcase-helper
```

```sh
npm link
```

2. In the project where you want to use CLI, tie the local package:

```sh
cd itcase-ui
```

```sh
npm link @itcase/helper
```

3. Install global plop
```sh
npm install -g plop
```

4. Now you can run the CLI utility:

```sh
helper
```
npm package: @itcase/icons
Description: - The `react-native-svg` library is needed to handle SVG files in React Native. If you haven’t installed it yet, follow these steps: https://github.com/software-mansion/react-native-svg
Latest version: 1.2.29

# How to Integrate and Use Icons in React Native Project

### 1. Install Dependencies

- The `react-native-svg` library is needed to handle SVG files in React Native. If you haven’t installed it yet, follow these steps: https://github.com/software-mansion/react-native-svg

```sh
npm install @itcase/icons @itcase/react-native-ui
```

- Сonfigure `metro` configuration to support packages with different `exports` (take configuration from other projects).

### 2. Using the Icon Component

- MyIcon.tsx

```tsx
import { icons24 } from '@itcase/icons/default/svg'
import { Icon } from '@itcase/react-native-ui'
import { ISvgComponent } from '../interfaces/app.interfaces'

const MyIcon = () => {
  return (
    <Icon
      SVGIcon={icons24.General.Dot as unknown as SvgComponent}
    />
  );
}
```

The SVG icon is a string (file path or inline SVG), the `react-native-svg` library converts it to a component, so we cast it to type `SvgComponent`.

### 3. Project Structure

```
src/
 ├── components/
 │  	└── MyIcon.tsx
 ├── interfaces/
 │  	└── app.interfaces.ts
 ├── types/
 │  	└── types.d.ts
 └── App.tsx
```

### 4. Defining Custom SVG Component Type

- app.interfaces.ts

```ts
import React from 'react'

import { SvgProps } from 'react-native-svg'

export interface SvgComponent extends React.FC<SvgProps> {}
```

- types.d.ts

```ts
declare module '*.svg' {
  import React from 'react'
  import { SvgProps } from 'react-native-svg'

  const content: React.FC<SvgProps>
  export default content
}
```
npm package: @itcase/map
Description: An open-source React component for drawing network diagrams.
Author: ITCase && Mark Mankarious
Latest version: 1.1.31

![readme-header](https://user-images.githubusercontent.com/1769678/223572353-788d5d38-cd28-40fa-96cd-9d29226f7e4b.png)

<div align="center">
  <h1>React component for drawing network diagrams.</h2>
</div>
npm package: @itcase/react-native-ui
Description: itcase react-native-ui
Author: itcase
Latest version: 1.0.9

A starter project with react native 0.75.3, @storybook/react-native 8, storybook/addon-react-native-web

![picture of storybook](https://github.com/user-attachments/assets/cf98766d-8b90-44ab-b718-94ab16e63205)

# getting started

To get all the dependencies run

```
yarn install
```

To run on the web use

```
yarn storybook
```

To run on ios or android

```
yarn start
```

in another terminal run

```
yarn ios
```

or

```
yarn android
```

To update the stories one time

```
yarn storybook-generate
```
npm package: @itcase/storybook-addon-auth
Description: REST Auth
Latest version: 1.0.5

# Storybook Addon Authorization

Storybook Addon Authorization can be used to getting data from REST API

## Installation

```sh
npm i -D @itcase/storybook-addon-auth
```

## Configuration

Then, add following content to [`.storybook/main.ts`](https://storybook.js.org/docs/configure#configure-your-storybook-project):

```js
export default {
  addons: ['@itcase/storybook-addon-auth'],
};
```

Add `@itcase/storybook-addon-auth` options `.storybook/preview.jsx`

```js
import type { Preview } from '@storybook/react'

import axios from 'axios'
import { axiosInstanceITCase } from '@itcase/common'

import { RootStoreProvider } from '../src/providers/RootStoreProvider'
import rootStore from '../src/stores/RootStore'

import { USERS } from './config/users'

axios.defaults.headers.post['Content-Type'] = 'application/json'
axios.defaults.headers.post.Accept = 'application/json'
axios.defaults.headers.common.Authorization = `Token ${process.env.AUTH_TOKEN}`
axiosInstanceITCase.defaults.headers.post['Content-Type'] = 'application/json'
axiosInstanceITCase.defaults.headers.post.Accept = 'application/json'

const preview: Preview = {
  parameters: {
    authorization: {
      options: {
        values: USERS,
        signInUrl: `${process.env.REST_BASE_URL}/rest/sign-in/`,
        profileUrl: `${process.env.REST_BASE_URL}/rest/profile/`,
      },
    },
  },
  decorators: [
    (Story: FC, storybookState) => {
      return (
        <RootStoreProvider>
          <Story />
        </RootStoreProvider>
      )
    },
  ],
  loaders: [
    async (storybookState) => {
      const authToken = storybookState.globals.authorization?.token
      if (rootStore.userStore.token !== authToken) {
        rootStore.userStore.update({ token: authToken })
      }
    },
  ],
}
```

Create user list `config/users.ts`

```js
import { DEFAULT_USERS } from '@itcase/storybook-addon-auth/defaults'

const USERS = {
  user: {
    name: 'User',
    // 👇 User Token from env
    token: process.env.USER_AUTH_TOKEN,
    color: '#777777'
  },
  manager: {
    name: 'Manager',
    // 👇 User Token from env
    token: process.env.MANAGER_AUTH_TOKEN,
    color: '#D80E4F'
  },
  admin: {
    name: 'Admin',
    // 👇 User Token from env
    token: process.env.ADMIN_AUTH_TOKEN,
    color: '#1EA5FC'
  },
  ...DEFAULT_USERS,
}

export { USERS }
```

## Usage

By default, the authorization toolbar includes a `unregistred` user.

### Use via `Authorization` tab

You can use the login form to get any user token.

![Tab](https://github.com/ITCase/storybook-addon-auth/blob/master/docs/tab.png)

### Use via tool

Use a predefined list of users with tokens in `config/users.ts`

![Tool](https://github.com/ITCase/storybook-addon-auth/blob/master/docs/tool.png)
npm package: @itcase/storybook-config
Description: Storybook configuration package
Author: ITCase
Latest version: 1.2.50

# ITCase Storybook Config

Конфигурация Storybook для проектов на React, Next.js и React Native.

Сторисы находятся в папке **`stories`**.

## Запуск Storybook

Перед запуском установите зависимости: `npm install`.

### React (Webpack)

```bash
npm run storybook-react-webpack
# или через Makefile (с очисткой кэша):
make storybook-react-webpack
```

### React (Vite)

```bash
npm run storybook-vite
# или:
make storybook-vite
```

### Next.js

```bash
npm run storybook-next-js
# или:
make storybook-next-js
```

### Next.js + Vite

```bash
npm run storybook-next-js-vite
# или:
make storybook-next-js-vite
```

### React Native (нативное приложение)

**iOS:**

```bash
npm run storybook-react-native-ios
# или:
make storybook-react-native-ios
```

**Android:**

```bash
npm run storybook-react-native-android
# или:
make storybook-react-native-android
```

### React Native Web

Storybook в браузере для React Native компонентов:

```bash
npm run storybook-react-native-web
# или:
make storybook-react-native-web
```
npm package: @itcenter-layout/bootstrap
Description: Bootstrap 5 for RWTH sites.
Latest version: 2.0.1
Deprecated: Package no longer supported. Use GitLab package instead.

# Bootstrap

This library contains Bootstrap 5 and the theme for the RWTH Aachen pages. The library is provided in the form of a Node.js module.

## Getting Started

If you want to customize the theme, the project must be cloned with git. Then just run

```
npm install
npm run build
```

inside the project.

Then customize the theme via \_rwth-styles.scss and rwth-theme.scss. The css files are automatically recompiled by gulp watch and injected into the browser.
npm package: @itcenteratunihelsinki/huds-lib
Description: Helsinki University Design System library
Latest version: 0.12.0

# HUDS design system

HUDS is a library of reusable design tokens, components, patterns and templates for building web sites and applications using unified look and feel of Helsinki University.

Note: This library is still under _heavy_ development and we are still researching for the best ways to go forward. Please do not consider it to be production ready. We welcome any feedback and ideas on improving both the library and how to document the components.

The library is published in 
- Core library [npm](https://www.npmjs.com/package/@itcenteratunihelsinki/huds-lib)
- React wrapper [npm](https://www.npmjs.com/package/@itcenteratunihelsinki/huds-lib-react)  

And documentation is hosted at [https://static.helsinki.fi/ds/](https://static.helsinki.fi/ds/)
npm package: @itcenteratunihelsinki/huds-lib-react
Description: HUDS React wrapper
Author: Tuukka Turu
Latest version: 0.12.0

# HUDS react wrapper

This is a react package provided from [npm](https://www.npmjs.com/package/@itcenteratunihelsinki/huds-lib).

Install package with `yarn add @itcenteratunihelsinki/huds-lib-react`
After installing with `yarn install` you can easily use Huds components. See example below.

## Example

```js
import { HyQuote, HyHeading } from "@itcenteratunihelsinki/huds-lib-react";

export default function TestComponent() {
  return (
    <div>
      <HyHeading>Test Component</HyHeading>
      <HyQuote quote-signature="Lisa-John Down">
        <p>
          Lorem ipsum dolor sit <strong>amet</strong>, consectetur adipiscing
          elit. Ut blandit neque nec dolor porttitor lacinia. Mauris porta mi
          eget nibh rutrum gravida eu id nisl. Ut eget semper augue, sit amet
          rutrum enim. Nullam finibus iaculis magna, nec vulputate tellus
          accumsan non.
        </p>
      </HyQuote>
    </div>
  );
}
```