open-index/open-npm huggingface dataset:
npm package: @sima-land/isomorph
Description: Tiny framework for fast start frontend microservices
Author: www.sima-land.ru team
Latest version: 11.0.0-alpha.66

# Isomorph

Минималистичный фреймворк для быстрого старта frontend-микросервисов.

Содержит утилиты для стека:

- react
- redux
- redux-saga
- fetch
- axios
- express
- webpack
- sentry (логирование ошибок)
- opentelemetry/jaeger (трассировка)
- prometheus (метрики)

## Установка

```sh
# npm
npm i -S @sima-land/isomorph

# или yarn
yarn add @sima-land/isomorph
```
npm package: @sima-land/linters
Description: Code style linter configuration presets
Author: www.sima-land.ru team
Latest version: 7.2.0

# Frontend linters

Пакет с пресетами конфигураций линтеров.

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

### Установка

```bash
# npm
$ npm i -D @sima-land/linters eslint stylelint prettier

# или yarn
yarn add -D @sima-land/linters eslint stylelint prettier
```

### Конфигурация

#### С помощью `package.json`

```json
{
  "prettier": "@sima-land/linters/prettier",
  "eslintConfig": {
    "extends": "./node_modules/@sima-land/linters/eslint/index.js"
  },
  "stylelint": {
    "extends": "@sima-land/linters/stylelint"
  }
}
```

#### С помощью отдельных конфигурационных файлов

##### ESLint

Создать в корне проекта файл `eslint.config.mjs` со следующим содержимым:

```js
import simaland from '@sima-land/linters/eslint';

export default [
  // используем все правила из пакета, собранные вместе
  ...simaland,

  // ...опционально переопределяем правила
];
```

или `eslint.config.ts`

```ts
import tseslint from 'typescript-eslint';
import simaland from '@sima-land/linters/eslint';

export default tseslint.config(
  // используем все правила из пакета, собранные вместе
  simaland,

  // ...опционально переопределяем правила
);
```

Правила разбиты по модулям:

- `./linters/eslint/base` - базовые правила JS
- `./linters/eslint/typescript` - базовые правила TS
- `./linters/eslint/react` - правила React/JSX
- `./linters/eslint/lodash` - правила работы с Lodash
- `./linters/eslint/jest` - правила работы с Jest
- `./linters/eslint/testing-library` - правила работы с Testing Library
- `./linters/eslint/jsdoc` - правила оформления JSDoc
- `./linters/eslint/jsdoc-ts` - правила оформления JSDoc в TS
- `./linters/eslint/jsdoc-jest` - правила оформления JSDoc в тестах Jest
- `./linters/eslint` - все правила вместе

##### Stylelint

Создать в корне проекта файл `stylelint.config.mjs` со следующим содержимым:

```js
export default {
  extends: '@sima-land/linters/stylelint',
};
```

##### Prettier

Создать в корне проекта файл `.prettierrc` со следующим содержимым:

```json
"@sima-land/linters/prettier"
```

### Настройка git-хуков

Удобно использовать `husky` в связке с `lint-staged`, для этого необходимо:

1. Установить пакеты

   ```bash
   npm i -D husky lint-staged
   ```

2. Создать в корне проекта файл `lint-staged.config.js` со следующим содержимым:

   ```js
   {
     '*.{mjs,js,jsx,ts,tsx}': ['eslint --fix'],
     '*.{css,scss}': ['stylelint --fix'],
     '*': ['prettier --write --ignore-unknown'],
   };
   ```

3. Добавить **pre-commit** хук согласно документации husky: `npx lint-staged`

   <https://typicode.github.io/husky/#/?id=create-a-hook>

### Конфигурация текстовых редакторов и IDE

Актуальная информация в официальных документациях:

- <https://eslint.org/docs/user-guide/integrations>
- <https://stylelint.io/awesome-stylelint/#editor-integrations>
- <https://prettier.io/docs/en/editors.html>
npm package: @sima-land/moleculas
Description: В этом проекте собраны UI-компоненты, привязанные к контексту интернет-магазина.
Author: www.sima-land.ru team
Latest version: 16.0.0-alpha.47

# UI-moleculas

В этом проекте собраны UI-компоненты, привязанные к контексту интернет-магазина.

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

### Установка

```sh
# с помощью npm
npm i -S @sima-land/moleculas

# или с помощью yarn
yarn add @sima-land/moleculas
```

### Настройка среды

Компоненты библиотеки используют:

- импорты css/scss-файлов как css-модулей (каждый такой файл промаркирован в виде `*.m.{css,scss}`)

Поэтому, для использования библиотеки необходимо сконфигурировать среду (сборщик или тестовый фреймворк) таким образом чтобы данные импорты работали корректно.
npm package: @sima-land/ui-quarks
Description: Sima-land design system icons as a React components
Author: www.sima-land.ru team
Latest version: 5.8.0

# UI-quarks

Иконки дизайн-системы в виде UI-компонентов.

Разрабатывается в соответствии с [дизайн-руководствами](https://www.figma.com/file/NUkikBKmMo6WiXbWbHJWhkWh/Icons).

## Установка

```bash
# npm
npm i -S @sima-land/ui-quarks

# или yarn
yarn add @sima-land/ui-quarks
```

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

Иконки доступны как React-компоненты:

```tsx
import AddSVG from '@sima-land/ui-quarks/icons/24x24/Stroked/Add';

function IconicButton() {
  return (
    <button>
      <AddSVG fill='#f00' />
    </button>
  );
}
```

Также возможно использование иконок в виде файлов `.svg`.

## Добавление новых иконок

Для добавления необходимо:

- выделить иконку (именно компонент, включая безопасное расстояние);
- в правой колонке выбрать вкладку "Export";
- выбрать тип экспорта SVG и нажать кнопку "Export";
- достать из полученного архива иконку и расположить ее в `src/icons/` также, как располагаются остальные иконки

> Важно: не надо переименовывать файл иконки (только в крайних случаях), при сборке файл будет автоматически переименован в **PascalCase**.