@omnic/widget-locations 0.0.0-dev-20230929004158

package/@types/global.d.ts

@@ -0,0 +1,35 @@
+import type { WidgetConfig } from "src/types/config";
+
+export {};
+
+declare global {
+  type Primitive = null | number | string | boolean | undefined;
+
+  type Nullable<T> = null | undefined | T;
+
+  type Dictionary<T> = Record<string, T>;
+
+  interface HttpResponse<T> {
+    data: T;
+    success: boolean;
+    status_code: number;
+  }
+
+  interface ResponseList<T> {
+    results: T[];
+    count: number;
+    num_pages: number;
+    current_page: number;
+  }
+
+  type Coordinates = [number, number];
+  type Size = [number, number];
+
+  type Bounds = [Coordinates, Coordinates];
+
+  declare const ymaps: typeof ymaps;
+
+  interface Window {
+    OMNIC_WIDGET_LOCATIONS_CONFIG?: WidgetConfig;
+  }
+}

package/@types/react-range-slider-input.d.ts

@@ -0,0 +1 @@
+declare module "react-range-slider-input";

package/@types/svg.d.ts

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+  const content: React.FC<React.SVGProps<SVGElement>>;
+  export default content;
+}

package/README.md

@@ -0,0 +1,287 @@
+# OMNIC Widget Locations
+
+# USAGE
+
+## 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>
+```
+
+The `onPointClick` callback will be called when user clicks on a point on the map. The `point` object has the following structure:
+
+```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 NormalizeAddressResponseData {
+  country_name: string;
+  country_code: string;
+  region: string;
+  city: string;
+  latitude: number;
+  longitude: number;
+  street: string;
+  house: string;
+  block: string;
+  office: string;
+  postal_index: string;
+  address: string;
+  address_full: string;
+  city_place_id: string;
+  region_place_id: string;
+  place_id: string;
+}
+
+interface CourierPoint {
+  coords: Coordinates;
+  address: Nullable<NormalizeAddressResponseData>;
+}
+
+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;
+```
+
+Then `OMNIC_WIDGET_LOCATIONS_CONFIG` has the following structure:
+
+| 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`                                                                            |
+| country                         | string         | Country code in ISO 3166-1 Alpha-2 format                                                                                        |
+| 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]`                                                                         |
+| map.initialZoom                 | number         | Initial zoom level of the map. Example: `10`                                                                                     |
+| hideLogo                        | boolean        | Whether to hide the logo                                                                                                         |
+| startScreen                     | string         | Start screen of the widget. Currently supported: `map`, `selector`                                                               |
+| disableCourierDelivery          | boolean        | Whether to disable courier delivery option                                                                                       |
+| inputs                          | WidgetInputs   | Control over widget inputs                                                                                                       |
+| handlers                        | WidgetHandlers | Handlers config object                                                                                                           |
+| hideMapUI                       | boolean        | Whether to hide map UI elements, like trademarks, terms of use and etc.                                                          |
+| hideCloseButtonOnLocationScreen | boolean        | Whether to hide close button on location screen                                                                                  |
+| onPointClick                    | function       | Callback that will be called when user clicks on a point on the map.                                                             |
+| onLocationSelect                | function       | Callback that will be called when user selects a location Callback will be called with `google.maps.places.PlaceResult` argument |
+| onCloseLocationSelector         | function       | Callback that will be called when user closes location selector                                                                  |
+
+`WidgetInputs` type has the following structure:
+
+```typescript
+interface ForwardedInputElement extends Pick<HTMLInputElement, "focus" | "blur"> {
+  setValue: (value: string) => void;
+}
+
+interface InputConfig {
+  name: string;
+  ref: RefObject<ForwardedInputElement>;
+  onClick?: (name: string) => void;
+}
+
+interface WidgetInputs {
+  /**
+    Widget Map address input
+   */
+  address: InputConfig;
+  /**
+   * Widget city input
+   */
+  city: InputConfig;
+  /**
+   * Courier delivery apartment input
+   */
+  apartment: InputConfig;
+  /**
+   * Courier delivery comment input
+   */
+  comment: InputConfig;
+}
+```
+
+`WidgetHandlers` type has the following structure:
+
+```typescript
+interface LocationSelectorElement {
+  open: () => void;
+  close: () => void;
+}
+
+interface WidgetHandlers {
+  locationSelector: RefObject<LocationSelectorElement>;
+}
+```
+
+**NOTE:** when using screen keyboard do not forget to call `focus()` method for `address` and `city` inputs, so that autocomplete will appear.
+
+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>
+```
+
+## Integration in `React` mode
+
+When build in `React` mode the widget exposes `Widget` component. First install a package:
+
+```bash
+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";
+
+import "@omnic/widget-locations/dist/lib/style.css";
+
+const App = () => {
+  const onPointClick = (point: LocationPoint | CourierPoint) => {
+    // TODO: process point click
+  };
+
+  return (
+    <div id="@omnic/widget-locations">
+      <Widget /> {/* 👈 don't forget to provide `config` props */}
+    </div>
+  );
+};
+```
+
+`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` |
+
+DON'T 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
+$ npm install
+```
+
+Then build it in `lib` mode:
+
+```bash
+$ npm run build:lib
+```
+
+or `standalone` mode:
+
+```bash
+$ npm run build:app
+```
+
+Use `npm run dev` to start local development server.
+
+# API
+
+All API and components are exposed in `src/index.ts` file.
+
+`src/main.tsx` file is responsible for rendering the widget in `standalone` mode or in development mode.

package/dist/lib/api/client.d.ts

@@ -0,0 +1 @@
+export declare const axiosClient: import("axios").AxiosInstance;

package/dist/lib/components/Aside/Aside.d.ts

@@ -0,0 +1,8 @@
+import type { FC, ReactNode } from "react";
+interface AsideProps {
+    open: boolean;
+    className?: string;
+    children: ReactNode;
+}
+export declare const Aside: FC<AsideProps>;
+export {};

package/dist/lib/components/Aside/index.d.ts

@@ -0,0 +1 @@
+export * from "./Aside";

package/dist/lib/components/AsyncSelect/AsyncSelect.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { GroupBase } from "react-select";
+import type { AsyncProps } from "react-select/async";
+type AsyncSelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = AsyncProps<Option, IsMulti, Group> & {
+    label?: string;
+    className?: string;
+    customDropdownIcon?: React.ReactNode;
+};
+export declare const AsyncSelect: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ label, className, customDropdownIcon, ...props }: AsyncSelectProps<Option, IsMulti, Group>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/lib/components/AsyncSelect/index.d.ts

@@ -0,0 +1 @@
+export * from "./AsyncSelect";

package/dist/lib/components/Button/Button.d.ts

@@ -0,0 +1,13 @@
+import type { FC, ButtonHTMLAttributes, AnchorHTMLAttributes } from "react";
+interface ButtonBaseProps {
+    variant?: "primary" | "secondary";
+}
+type ButtonAsButton = {
+    as?: "button";
+} & ButtonHTMLAttributes<HTMLButtonElement> & ButtonBaseProps;
+type ButtonAsLink = {
+    as?: "link";
+} & AnchorHTMLAttributes<HTMLAnchorElement> & ButtonBaseProps;
+type ButtonProps = ButtonAsLink | ButtonAsButton;
+export declare const Button: FC<ButtonProps>;
+export {};

package/dist/lib/components/Button/index.d.ts

@@ -0,0 +1 @@
+export * from './Button';

package/dist/lib/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,2 @@
+import type { RadioProps } from "../Radio";
+export declare const Checkbox: <T>(props: RadioProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/Checkbox/index.d.ts

@@ -0,0 +1 @@
+export * from "./Checkbox";

package/dist/lib/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { HTMLAttributes } from "react";
+import type { RadioProps } from "../Radio";
+export type CheckboxGroupProps<T> = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
+    value?: T;
+    label?: string;
+    children: React.ReactElement<RadioProps<T>>[];
+    onChange?: (value: T) => void;
+};
+export declare const CheckboxGroup: <T extends Dictionary<unknown>>({ label, value, onChange, children, className, ...props }: CheckboxGroupProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/CheckboxGroup/index.d.ts

@@ -0,0 +1 @@
+export * from "./CheckboxGroup";

package/dist/lib/components/Chip/Chip.d.ts

@@ -0,0 +1,8 @@
+import type { FC, ReactNode } from "react";
+interface ChipProps extends React.ComponentProps<"div"> {
+    active?: boolean;
+    className?: string;
+    children: ReactNode;
+}
+export declare const Chip: FC<ChipProps>;
+export {};

package/dist/lib/components/Chip/index.d.ts

@@ -0,0 +1 @@
+export * from "./Chip";

package/dist/lib/components/CloseButton/CloseButton.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentProps, FC } from "react";
+interface CloseButtonProps extends ComponentProps<"div"> {
+    position?: "relative" | "absolute";
+}
+export declare const CloseButton: FC<CloseButtonProps>;
+export {};

package/dist/lib/components/CloseButton/index.d.ts

@@ -0,0 +1 @@
+export * from "./CloseButton";

package/dist/lib/components/CourierBalloon/CourierBalloon.d.ts

@@ -0,0 +1,12 @@
+import type { FC } from "react";
+import type { CourierPoint } from '../../types/points';
+type CourierBalloonProps = Partial<CourierPoint> & {
+    SSR?: boolean;
+    variant: "error" | "default";
+    hasCloseButton?: boolean;
+    className?: string;
+    onDetails?: () => void;
+    onClose?: () => void;
+};
+export declare const CourierBalloon: FC<CourierBalloonProps>;
+export {};

package/dist/lib/components/CourierBalloon/index.d.ts

@@ -0,0 +1 @@
+export * from "./CourierBalloon";

package/dist/lib/components/CourierDetailsModal/CourierDetailsModal.d.ts

@@ -0,0 +1,10 @@
+import type { FC } from "react";
+import type { CourierDeliveryPoint, CourierPoint } from '../../types/points';
+interface CourierDetailsModalProps {
+    className?: string;
+    onClose?: () => void;
+    location: CourierPoint;
+    onSubmit?: (point: CourierDeliveryPoint) => void;
+}
+export declare const CourierDetailsModal: FC<CourierDetailsModalProps>;
+export {};

package/dist/lib/components/CourierDetailsModal/index.d.ts

@@ -0,0 +1 @@
+export * from "./CourierDetailsModal";

package/dist/lib/components/CourierDetailsView/CourierDetailsView.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import type { CourierDeliveryPoint, CourierPoint } from '../../types/points';
+export interface CourierDetailsViewClasses {
+    header?: string;
+    content?: string;
+}
+interface CourierDetailsViewProps {
+    location: CourierPoint;
+    hideActions?: boolean;
+    classes?: CourierDetailsViewClasses;
+    onClose?: () => void;
+    onChange?: (location: CourierDeliveryPoint) => void;
+    onSubmit?: (location: CourierDeliveryPoint) => void;
+}
+declare const MemoizedCourierDetailsView: import("react").NamedExoticComponent<CourierDetailsViewProps>;
+export { MemoizedCourierDetailsView as CourierDetailsView };

package/dist/lib/components/CourierDetailsView/CourierDetailsView.utils.d.ts

@@ -0,0 +1,20 @@
+import type { Reducer } from "react";
+import type { CourierDeliveryPoint } from '../../types/points';
+type ChangeHandler = (location: CourierDeliveryPoint) => void;
+interface ReducerParams {
+    set?: ChangeHandler;
+}
+export type CourierDetailsModalState = CourierDeliveryPoint;
+export type CourierDetailsModalAction = {
+    type: "SET_COMMENT";
+    payload: string;
+} | {
+    type: "SET_DELIVERY_TIME";
+    payload: string;
+} | {
+    type: "SET_APARTMENT_NUMBER";
+    payload: string;
+};
+export declare const createReducer: ({ set }: ReducerParams) => Reducer<CourierDetailsModalState, CourierDetailsModalAction>;
+export declare const getStateValid: (state: CourierDetailsModalState) => boolean;
+export {};

package/dist/lib/components/CourierDetailsView/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./CourierDetailsView";
+export * from "./CourierDetailsView.utils";

package/dist/lib/components/CurrentLocation/CurrentLocation.d.ts

@@ -0,0 +1,6 @@
+import type { FC } from "react";
+interface CurrentLocationProps {
+    className?: string;
+}
+export declare const CurrentLocation: FC<CurrentLocationProps>;
+export {};

package/dist/lib/components/CurrentLocation/index.d.ts

@@ -0,0 +1 @@
+export * from "./CurrentLocation";

package/dist/lib/components/Header/Header.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface HeaderProps {
+    className?: string;
+}
+export declare const MemoizedHeader: import("react").NamedExoticComponent<HeaderProps>;
+export { MemoizedHeader as Header };

package/dist/lib/components/Header/LogoContainer.d.ts

@@ -0,0 +1,2 @@
+import type { FC } from "react";
+export declare const LogoContainer: FC;

package/dist/lib/components/Header/index.d.ts

@@ -0,0 +1 @@
+export * from "./Header";

package/dist/lib/components/Hr/Hr.d.ts

@@ -0,0 +1,4 @@
+import type { FC, HTMLAttributes } from "react";
+type HrProps = HTMLAttributes<HTMLElement>;
+export declare const Hr: FC<HrProps>;
+export {};

package/dist/lib/components/Hr/index.d.ts

@@ -0,0 +1 @@
+export * from "./Hr";

package/dist/lib/components/Input/Input.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode, RefObject } from "react";
+import type { ForwardedInputElement } from '../../types/config';
+interface InputProps extends React.AllHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    className?: string;
+    startAdornment?: ReactNode;
+    endAdornment?: ReactNode;
+    inputRef?: RefObject<HTMLInputElement>;
+}
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<ForwardedInputElement>>;
+export {};

package/dist/lib/components/Input/index.d.ts

@@ -0,0 +1 @@
+export * from "./Input";

package/dist/lib/components/Layout/Layout.d.ts

@@ -0,0 +1,6 @@
+import type { FC, ReactNode } from "react";
+interface LayoutProps {
+    children: ReactNode;
+}
+export declare const Layout: FC<LayoutProps>;
+export {};

package/dist/lib/components/Layout/index.d.ts

@@ -0,0 +1 @@
+export * from "./Layout";

package/dist/lib/components/LocationAside/LocationAside.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { LocationSelectorElement } from '../../types/config';
+declare const MemoLocationAside: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<LocationSelectorElement>>>;
+export { MemoLocationAside as LocationAside };

package/dist/lib/components/LocationAside/index.d.ts

@@ -0,0 +1 @@
+export * from "./LocationAside";

package/dist/lib/components/LocationBalloon/LocationBalloon.d.ts

@@ -0,0 +1,10 @@
+import type { FC } from "react";
+import type { LocationPoint } from '../../types/points';
+type LocationBalloonProps = Partial<LocationPoint> & {
+    SSR?: boolean;
+    className?: string;
+    onSubmit?: () => void;
+    onDetails?: () => void;
+};
+export declare const LocationBalloon: FC<LocationBalloonProps>;
+export {};

package/dist/lib/components/LocationBalloon/index.d.ts

@@ -0,0 +1 @@
+export * from "./LocationBalloon";

package/dist/lib/components/LocationDetailsModal/LocationDetailsModal.d.ts

@@ -0,0 +1,10 @@
+import type { FC } from "react";
+import type { LocationPoint } from '../../types/points';
+interface LocationDetailsModalProps {
+    className?: string;
+    onClose?: () => void;
+    location: LocationPoint;
+    onSubmit?: (point: LocationPoint) => void;
+}
+export declare const LocationDetailsModal: FC<LocationDetailsModalProps>;
+export {};

package/dist/lib/components/LocationDetailsModal/index.d.ts

@@ -0,0 +1 @@
+export * from "./LocationDetailsModal";

package/dist/lib/components/LocationSelector/CourierDeliverySelectorContainer.d.ts

@@ -0,0 +1,6 @@
+import type { FC } from "react";
+interface CourierDeliverySelectorContainerProps {
+    className?: string;
+}
+export declare const CourierDeliverySelectorContainer: FC<CourierDeliverySelectorContainerProps>;
+export {};

package/dist/lib/components/LocationSelector/LocationSelector.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface LocationSelectorProps {
+    className?: string;
+}
+declare const LocationSelectorMemo: import("react").NamedExoticComponent<LocationSelectorProps>;
+export { LocationSelectorMemo as LocationSelector };

package/dist/lib/components/LocationSelector/LocationSelector.utils.d.ts

@@ -0,0 +1 @@
+export declare const loadLocations: (value: string) => Promise<import("../..").LocationPoint[]>;

package/dist/lib/components/LocationSelector/SelfPickupSelectorContainer.d.ts

@@ -0,0 +1,9 @@
+import type { FC } from "react";
+import type { LocationPoint } from '../../types/points';
+interface SelfPickupSelectorContainerProps {
+    className?: string;
+    value?: null | LocationPoint;
+    onChange?: (value: null | LocationPoint) => void;
+}
+export declare const SelfPickupSelectorContainer: FC<SelfPickupSelectorContainerProps>;
+export {};

package/dist/lib/components/LocationSelector/index.d.ts

@@ -0,0 +1 @@
+export * from "./LocationSelector";

package/dist/lib/components/LocationView/LocationView.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { LocationPoint } from '../../types/points';
+export interface LocationViewClasses {
+    header?: string;
+    content?: string;
+}
+interface LocationViewProps {
+    location: LocationPoint;
+    hideActions?: boolean;
+    classes?: LocationViewClasses;
+    onClose?: () => void;
+    onSubmit?: () => void;
+}
+declare const MemoizedLocationView: import("react").NamedExoticComponent<LocationViewProps>;
+export { MemoizedLocationView as LocationView };