@omnic/widget-locations 1.0.14 → 1.0.17

package/README.md

@@ -1,48 +1,225 @@
-# Super Cool Widget
+# OMNIC Widget Locations
 
-## Инициализация проекта
+# USAGE
 
-```bash
-$ npm install
+## Integration in `standalone` mode
+
+When build in `standalone` mode the widget exposes `window.OMNIC_WIDGET_LOCATIONS_CONFIG` config object.
+Add script tag to your page and pass the config object to the widget like this:
+
+```html
+<script>
+  window.OMNIC_WIDGET_LOCATIONS_CONFIG = {
+    INN: "INN",
+    locale: "en",
+    map: {
+      provider: "google",
+      center: [55.75, 37.57],
+    },
+    onPointClick: (point: CallbackPoint) => {
+      // TODO: process point click
+    },
+  };
+</script>
 ```
 
-## Сборка в режиме `React` библиотеки
+The `onPointClick` callback will be called when user clicks on a point on the map. The `point` object has the following structure:
 
-```bash
-$ npm run build:lib
+```typescript
+type Coordinates = [number, number];
+
+interface Country {
+  uid: string;
+  name: string;
+  abbreviation: string;
+}
+
+interface Region {
+  uid: string;
+  name: string;
+  national_id: string;
+}
+
+interface City {
+  uid: string;
+  name: string;
+  region: Region;
+  latitude: number;
+  country: Country;
+  longitude: number;
+  national_id: string;
+}
+
+interface Location {
+  city: City;
+  house: string;
+  block: string;
+  street: string;
+  office: string;
+  region: Region;
+  floor: unknown;
+  latitude: number;
+  country: Country;
+  longitude: number;
+  postal_index: string;
+  full_address: string;
+}
+
+interface LocationPoint {
+  uid: string;
+  name: string;
+  code: string;
+  type: number;
+  brand: string;
+  status: number;
+  images: string[];
+  schedule: string[];
+  max_length: number;
+  max_weight: number;
+  is_pickup: boolean;
+  location: Location;
+  description: string;
+  is_favorite: boolean;
+  pay_by_cash: boolean;
+  pay_by_card: boolean;
+  is_delivery: boolean;
+  near_station?: string;
+  location_name?: string;
+  is_check_order: boolean;
+  round_the_clock: boolean;
+  is_dressing_room: boolean;
+  near_metro_station?: string;
+}
+
+interface CourierPoint {
+  coords: Coordinates;
+  address: null | string;
+}
+
+interface CourierDeliveryPoint extends CourierPoint {
+  comment: string;
+  pay_by_cash: boolean;
+  pay_by_card: boolean;
+  delivery_time: string;
+  apartment_number: string;
+}
+
+// THIS IS THE TYPE OF THE CALLBACK POINT
+type CallbackPoint = LocationPoint | CourierDeliveryPoint;
 ```
 
-Далее можно перейти в раздел `clients/react`, установить зависимости и протестировать
+Then `OMNIC_WIDGET_LOCATIONS_CONFIG` has the following structure:
 
-```bash
-$ cd clients/react
-$ npm install
-$ npm link
-$ npm run dev
+| Property             | Type     | Description                                                          |
+| -------------------- | -------- | -------------------------------------------------------------------- |
+| INN                  | string   | INN of the company that uses the widget                              |
+| font                 | string   | Font family to use                                                   |
+| radius               | number   | Border radius of buttons                                             |
+| locale               | string   | Locale of the widget. Currently supported: `en`, `ru`                |
+| palette              | object   | Palette config object                                                |
+| palette.primary      | string   | Primary color of the widget. Example: `#ff0000`                      |
+| palette.primary-dark | string   | Darker version of the primary color. Example: `#cc0000`              |
+| map                  | object   | Map config object. See below for details                             |
+| map.provider         | string   | Map provider. Currently supported: `google`, `yandex`                |
+| map.center           | number[] | Coordinates of the map center. Example: `[55.75, 37.57]`             |
+| onPointClick         | function | Callback that will be called when user clicks on a point on the map. |
+
+Include `styles.css` and `widget.umd.js` in your page:
+
+```html
+<link rel="stylesheet" href="styles.css" />
+<script src="widget.umd.js"></script>
+```
+
+After that you can create a div block with id `@omnic/widget-locations` and widget will be rendered there:
+
+```html
+<div id="@omnic/widget-locations"></div>
 ```
 
-## Сборка в режиме `standalone` приложения
+## Integration in `React` mode
+
+When build in `React` mode the widget exposes `Widget` component. First install a package:
 
 ```bash
-$ npm run build:app
+npm install @omnic/widget-locations
+```
+
+Then import it and use like this:
+
+```tsx
+import React from "react";
+import { Widget } from "@omnic/widget-locations";
+import type { LocationPoint, CourierPoint } from "@omnic/widget-locations";
+
+const App = () => {
+  const onPointClick = (point: LocationPoint | CourierPoint) => {
+    // TODO: process point click
+  };
+
+  return (
+    <div id="@omnic/widget-locations">
+      <Widget
+        config={{
+          INN: "INN",
+          locale: "en",
+          map: {
+            provider: "google",
+            center: [40.1772, 44.50349],
+          },
+          radius: 2,
+          font: "Roboto",
+          palette: {
+            primary: "#0cb834",
+            "primary-dark": "#079b1f",
+          },
+          onPointClick: console.log,
+        }}
+        options={{
+          baseURL: "https://widget.omnic.sh",
+        }}
+      />
+    </div>
+  );
+};
 ```
 
-Далее можно перейти в раздел `clients/vanilla`, установить зависимости и протестировать
+`Widget` component has the following props:
+
+| Property        | Type   | Description                                                    |
+| --------------- | ------ | -------------------------------------------------------------- |
+| config          | object | Config object. See above for details                           |
+| options         | object | Options object                                                 |
+| options.baseURL | string | Base URL of the widget API. Example: `https://widget.omnic.sh` |
+
+DO NOT FORGET to wrap the widget in a div with id `@omnic/widget-locations`, so that all css styles will be applied correctly.
+
+# DEVELOPMENT
+
+## Project setup
+
+Install all dependencies:
 
 ```bash
-$ cd clients/vanilla
 $ npm install
-$ npm run dev
 ```
 
-## Локальная разработка
+Then build it in `lib` mode:
+
+```bash
+$ npm run build:lib
+```
+
+or `standalone` mode:
 
 ```bash
-$ npm run dev
+$ npm run build:app
 ```
 
-## Инкапсуляция библиотеки
+Use `npm run dev` to start local development server.
+
+# API
 
-Всё API что должно быть доступно клиенту должно быть экспортировано в `src/index.ts` фале.
+All API and components are exposed in `src/index.ts` file.
 
-`src/main.tsx` файл отвечает за рендеринг приложения в режиме `standalone` или в режиме разработки.
+`src/main.tsx` file is responsible for rendering the widget in `standalone` mode or in development mode.

package/dist/lib/src/hooks/useMapFactory.d.ts

@@ -1,2 +1,2 @@
 import { MapProvider } from '../types/config';
-export declare const useMapFactory: (provider: MapProvider) => import("react").FC<import("../types/map").MapProps> | import("react").NamedExoticComponent<import("../types/map").MapProps>;
+export declare const useMapFactory: (provider: MapProvider) => import("react").FC<import("..").MapProps> | import("react").NamedExoticComponent<import("..").MapProps>;

package/dist/lib/src/i18n.d.ts

@@ -64,6 +64,8 @@ export declare const resources: {
                 delivery_time: string;
                 apartment_number: string;
                 comment: string;
+                pay_by_cash: string;
+                pay_by_card: string;
             };
             courier_balloon: {
                 title: string;
@@ -134,6 +136,8 @@ export declare const resources: {
                 delivery_time: string;
                 apartment_number: string;
                 comment: string;
+                pay_by_cash: string;
+                pay_by_card: string;
             };
             courier_balloon: {
                 title: string;

package/dist/lib/src/index.d.ts

@@ -1 +1,7 @@
 export * from "./views/Widget";
+export * from "./types/map";
+export * from "./types/cities";
+export * from "./types/config";
+export * from "./types/countries";
+export * from "./types/points";
+export * from "./types/regions";

package/dist/lib/src/types/points.d.ts

@@ -10,22 +10,22 @@ export interface PointsList {
 }
 export interface LocationPoint {
     uid: string;
-    type: number;
-    code: string;
     name: string;
+    code: string;
+    type: number;
     brand: string;
     status: number;
     images: string[];
-    location: Location;
-    is_pickup: boolean;
-    max_weight: number;
+    schedule: string[];
     max_length: number;
+    max_weight: number;
+    is_pickup: boolean;
+    location: Location;
     description: string;
-    schedule: Schedule[];
-    is_delivery: boolean;
-    pay_by_card: boolean;
-    pay_by_cash: boolean;
     is_favorite: boolean;
+    pay_by_cash: boolean;
+    pay_by_card: boolean;
+    is_delivery: boolean;
     near_station?: string;
     location_name?: string;
     is_check_order: boolean;
@@ -44,13 +44,6 @@ export interface CourierDeliveryPoint extends CourierPoint {
     delivery_time: string;
     apartment_number: string;
 }
-export interface Schedule {
-    end: string;
-    day: number;
-    start: string;
-    time?: string;
-    work_day?: boolean;
-}
 export interface Location {
     city: City;
     house: string;