# Dartcom. Библиотека компонентов

Это основная библиотека компонентов для Dartcom.

## Начальная установка

```javascript
// Установка сторонних заивимостей из package.json
npm i

// Запуск визуального тестирования через storybook
npm run storybook
```

## Публикация

###### Перед публикацией убедитесь, что:

- Версия в package.json корректна

- Все тесты проходят

- Сама сбока библиотеки проходит без ошибок

- У вас есть аккаунт npm и токен доступа

// Проверьте сборку
npm run build

// Проверьте содержимое пакета
npm pack

Основные ссылки

```javascript
https://unpkg.com/leaflet-textpath@1.3.0/leaflet.textpath.js
```

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

## Работа с картой

- Для начала работы потребуется установить следующие библиотеки:

```javascript
npm i -S react react-dom leaflet react-leaflet @dartcom/ui-kit
```

- Основную часть приложения, где будет использоваться карта, нужно обернуть в **DartcomProviders**:

```javascript
import { DartcomProviders } from '@dartcom/ui-kit';

<DartcomProviders
  configOptions={{
    private_key: 'Ваш приватный ключ',

    apiConfig: {
      baseURL: 'Основной адрес backend',
    },
  }}>
  {...Content}
</DartcomProviders>;
```

**private_key** - ключ доступа к библиотеки, он выдается администрацией и проверяется для доступа как к самой карте, так и к определенным компонентам внтури библиотеки

**baseURL** - адрес backend части вашего приложения, куда отсылаются основные запросы


- Далее в вашем приложении нужно инициализировать карту leafet внтури основного **DartcomProviders**:

```javascript
import { MapContainer } from 'react-leaflet';

<MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
  {...Content}
</MapContainer>;
```

- Теперь нужно поместить внутрь MapContainer компонент с нашим слоем:

```javascript
import DartcomLayer from './your-path';

import { MapContainer } from 'react-leaflet';

<MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
  <DartcomLayer />

  {...Content}
</MapContainer>;
```

- В компоненте нужно инициализировать слой и добавить его на карту как основную подложку:

```javascript
// your-path.tsx

import * as React from 'react';

import { useMap } from 'react-leaflet';

import {
  getAllLayers,
  SourceLayers,
  TangramLayer,
  TangramSourceNames,
} from '@dartcom/ui-kit';

const DartcomLayer: React.FC = () => {
  const map = useMap();

   React.useEffect(() => {
    const { current: layersControl } = controlRef;

    const defaultLayers = getAllLayers(TangramSourceNames.TILE);

    new TangramLayer({
      defaultLayers,

      eventHandlers: {
        [SourceLayers[name]]: {
          click: ({ properties }) => {},
          hover: ({ properties }) => {},
        },
      },

      onCreate: ({ layer }) => {
        layer.addTo(map);
      },

      onDestroy: ({ layer }) => {
        layer.removeFrom(map);
      },
    });
  }, []);

  return null;
};

export default DartcomLayer;
```

- **defaultLayers** - это основной список слоев, которые можно получить из библиотеки и который будет показываться на карте. В примере мы грузим все слои из ресурса **TangramSourceNames.TILE** с помощью функции **getAllLayers**, но пожно подгружать разные слои из разных ресурсов