Merge pull request #1 from 2gis/main

Update gh-pages with main
2gis · Jun 7, 2024 · 8c63324 · 8c63324
2 parents dcc70b6 + b48cae0
commit 8c63324
Show file tree

Hide file tree

Showing 51 changed files with 223 additions and 777 deletions.
diff --git a/apps/demo/app/components/Datepicker.tsx b/apps/demo/app/components/Datepicker.tsx
@@ -1,17 +1,19 @@
-import { FC, useCallback } from "react";
+import type { FC} from "react";
+import { useCallback } from "react";
 import { DateInput } from "@mapgl-shadows/ui/datepicker";
 import { formatToDatepicker, parseDatepickerFormat } from '../utils/date';
 
-type Props = {
+interface DatepickerProps {
     value: Date,
     disabled?: boolean,
     onChange: (date: Date) => void
 }
 
-export const Datepicker: FC<Props> = ({ value, disabled = false, onChange }) => {
-    const _onChange = useCallback((value: string | undefined) => {
-        onChange(parseDatepickerFormat(value))
+// eslint-disable-next-line react/function-component-definition -- wtf...
+export const Datepicker: FC<DatepickerProps> = ({ value, disabled = false, onChange }) => {
+    const _onChange = useCallback((newValue: string | undefined) => {
+        onChange(parseDatepickerFormat(newValue))
     }, [onChange]);
 
-    return <DateInput value={formatToDatepicker(value)} disabled={disabled} onChange={_onChange} />
+    return <DateInput disabled={disabled} onChange={_onChange} value={formatToDatepicker(value)} />
 }
diff --git a/apps/demo/app/components/LightControl.tsx b/apps/demo/app/components/LightControl.tsx
@@ -1,16 +1,17 @@
-import { FC, useCallback, useEffect, useState } from "react"
+import type { FC} from "react";
+import { useCallback, useEffect, useState } from "react"
 import { toZonedTime, fromZonedTime } from 'date-fns-tz';
 import { Slider } from '@mapgl-shadows/ui/slider'
 import {MapglLightingControl} from '@mapgl-shadows/lighting-control'
+import { useMapEffect } from "../hooks/useMapEffect";
+import { formatHHMM, formatToMinutes } from '../utils/date'
+import type { TMap } from "../types";
 import { TimelapseButton } from "./TimelapseButton";
 import { Datepicker } from "./Datepicker";
 import { Time } from "./Time";
 import styles from './LightControl.module.css'
-import { useMapEffect } from "../hooks/useMapEffect";
-import { formatHHMM, formatToMinutes } from '../utils/date'
-import { TMap } from "../types";
 
-type Props = {
+interface Props {
     className?: string
 }
 
@@ -183,25 +184,25 @@ export const LightControl: FC<Props> = (props) => {
 
     return (<div className={props.className ? `${props.className} ${styles.lightControl}` : styles.lightControl} >
         <div className={styles.controls}>
-            <Datepicker value={selectedDate} disabled={!tz} onChange={onDateChange} />
+            <Datepicker disabled={!tz} onChange={onDateChange} value={selectedDate} />
             <Time value={formatHHMM(selectedDate)} />
             <TimelapseButton active={timelapseEnabled} disabled={!tz} onClick={toggleTimelapse} />
         </div>
         <div className={styles.slider}>
-            <Time value="12:00 AM" noIcon />
+            <Time noIcon value="12:00 AM" />
             <div className={styles.sliderControl}>
                 <Slider
                     disabled={!tz}
-                    type="slider"
-                    value={formatToMinutes(selectedDate)}
-                    min={0}
                     max={1439}
-                    step={1}
+                    min={0}
                     onChange={onMinutesChange}
                     onMouseMove={onMinutesChange}
+                    step={1}
+                    type="slider"
+                    value={formatToMinutes(selectedDate)}
                 />
             </div>
-            <Time value="23:59 PM" noIcon />
+            <Time noIcon value="23:59 PM" />
         </div>
     </div>)
 }
diff --git a/apps/demo/app/components/MapWrapper.tsx b/apps/demo/app/components/MapWrapper.tsx
@@ -3,7 +3,9 @@ import { MAP_EL_ID } from "../consts";
 
 export const MapWrapper = memo(
     () => {
-        return <div id={MAP_EL_ID} style={{ width: '100vw', height: '100vh' }}></div>;
+        return <div id={MAP_EL_ID} style={{ width: '100vw', height: '100vh' }} />;
     },
     () => true,
-);
+);
+
+MapWrapper.displayName = "MapWrapper";
diff --git a/apps/demo/app/components/MapglMap.tsx b/apps/demo/app/components/MapglMap.tsx
@@ -1,57 +1,68 @@
 import { useEffect } from "react";
-import { MapWrapper } from "./MapWrapper";
+import type { FC } from 'react'
 import { useMapContext } from '../hooks/useMapContext'
 import { MAP_EL_ID } from '../consts'
-import { TMap } from "../types";
+import type { TMap } from "../types";
+import { MapWrapper } from "./MapWrapper";
 
 const DEFAULT_CENTER: [number, number] = [55.31878, 25.23584];
 
-export function MapglMap() {
-    const { ensureApi, setMap } = useMapContext();
-
-    useEffect(() => {
-        let map: TMap | undefined = undefined;
-        let cancelled = false;
-
-        ensureApi().then((api) => {
-          if (cancelled) {
-            return;
-          }
-
-          const search = new URLSearchParams(window.location.search);
-          const lng = search.get('lng') ? parseFloat(search.get('lng')!) : DEFAULT_CENTER[0];
-          const lat = search.has('lat') ? parseFloat(search.get('lat')!) : DEFAULT_CENTER[1];
-
-          map = new api.Map(
-            MAP_EL_ID,
-            {
-                center: [lng, lat],
-                zoom: 18,
-                key: '4970330e-7f1c-4921-808c-0eb7c4e63001',
-                enableTrackResize: true,
-            }
-          );
-
-          map.on('moveend', () => {
-            search.set('lng', map!.getCenter()[0]!.toString());
-            search.set('lat', map!.getCenter()[1]!.toString());
-            history.replaceState({}, document.title, search.toString());
-          });
-
-          // Выкинем инстанс карты в глобальный скоуп для удобного дебага и для e2e-тестов
-          (window as any).map = map;
-
-          setMap(map);
-        });
-
-        return () => {
-          cancelled = true;
-          map?.destroy();
-          setMap(undefined);
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-      }, []);
-
-
-    return <MapWrapper />
+// eslint-disable-next-line react/function-component-definition -- wtf
+export const MapglMap: FC = () => {
+  const { ensureApi, setMap } = useMapContext();
+
+  useEffect(() => {
+    let map: TMap | undefined;
+    let cancelled = false;
+
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises -- ok here
+    ensureApi().then((api) => {
+      if (cancelled) {
+        return;
+      }
+
+      const search = new URLSearchParams(window.location.search);
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- we're sure
+      const lngFromURL = search.has('lng') ? parseFloat(search.get('lng')!) : DEFAULT_CENTER[0];
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- we're sure
+      const latFromURL = search.has('lat') ? parseFloat(search.get('lat')!) : DEFAULT_CENTER[1];
+
+      map = new api.Map(
+        MAP_EL_ID,
+        {
+          center: [lngFromURL, latFromURL],
+          zoom: 18,
+          key: '4970330e-7f1c-4921-808c-0eb7c4e63001',
+          enableTrackResize: true,
+        }
+      );
+
+      map.on('moveend', () => {
+        if (!map) {
+          return;
+        }
+
+        const [lng, lat] = map.getCenter();
+        search.set('lng', lng.toPrecision(8));
+        search.set('lat', lat.toPrecision(8));
+        history.replaceState({}, document.title, `${window.location.origin}${window.location.pathname}?${search.toString()}`);
+      });
+
+      // Выкинем инстанс карты в глобальный скоуп для удобного дебага и для e2e-тестов
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- we have defined map instance
+      window.map = map!;
+
+      setMap(map);
+    });
+
+    return () => {
+      cancelled = true;
+      map?.destroy();
+      setMap(undefined);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- wtf
+  }, []);
+
+
+  return <MapWrapper />
 }
diff --git a/apps/demo/app/components/Time.tsx b/apps/demo/app/components/Time.tsx
@@ -1,18 +1,19 @@
-import { FC } from "react"
+import type { FC } from "react"
 import { Clock } from "@mapgl-shadows/ui/icon/clock"
 import { Text } from "@mapgl-shadows/ui/text"
 import styles from './Time.module.css'
 
-type Props = {
+interface TimeProps {
     value: string,
     noIcon?: boolean
 }
 
-export const Time: FC<Props> = ({ value, noIcon = false }) => {
+// eslint-disable-next-line react/function-component-definition -- wtf
+export const Time: FC<TimeProps> = ({ value, noIcon = false }) => {
     return (
         <div className={styles.time}>
             {noIcon ? null : <Clock />}
-            <Text type={'title15'}>
+            <Text type="title15">
                 {value}
             </Text>
         </div>

diff --git a/apps/demo/app/components/TimelapseButton.tsx b/apps/demo/app/components/TimelapseButton.tsx
@@ -1,8 +1,8 @@
 import { Button } from "@mapgl-shadows/ui/button";
 import { Play } from "@mapgl-shadows/ui/icon/play";
-import { FC } from "react";
+import type { FC } from "react";
 
-type Props = {
+interface Props {
     active: boolean,
     disabled?: boolean,
     onClick: () => void
@@ -11,7 +11,7 @@ type Props = {
 const icon = <Play />
 
 export const TimelapseButton: FC<Props> = ({ active, disabled = false, onClick }) => {
-    return <Button icon={icon} disabled={disabled} appearance={active ? 'primary' : 'tertiary'} onClick={onClick}>
+    return <Button appearance={active ? 'primary' : 'tertiary'} disabled={disabled} icon={icon} onClick={onClick}>
         {active ? 'Stop timelapse' : 'Play timelapse'}
     </Button>
 }
diff --git a/apps/demo/app/context/map.tsx b/apps/demo/app/context/map.tsx
@@ -1,14 +1,15 @@
-import { createContext, FC, ReactNode, useRef, useState } from 'react';
+import type { FC, ReactNode} from 'react';
+import { createContext, useRef, useState } from 'react';
+import type { TMap, TApi } from '../types';
 import { getApi, loadMapApi } from './mapgl'
-import { TMap, TApi } from '../types';
 
-type MapContext = {
+interface MapContext {
   map?: TMap;
   api?: TApi;
   ensureMap: () => Promise<TMap>;
   ensureApi: () => Promise<TApi>;
   setMap: (map: TMap | undefined) => void;
-};
+}
 
 export const MapContext = createContext<MapContext>({
   ensureMap: () => {

diff --git a/apps/demo/app/context/mapgl.ts b/apps/demo/app/context/mapgl.ts
@@ -1,7 +1,7 @@
-import { TApi } from '../types';
+import type { TApi } from '../types';
 
-let promise: Promise<TApi> | undefined = undefined;
-let api: TApi | undefined = undefined;
+let promise: Promise<TApi> | undefined;
+let api: TApi | undefined;
 
 export const loadMapApi = (mapglUrl?: string): Promise<TApi> => {
   if (promise) {
@@ -18,4 +18,4 @@ export const loadMapApi = (mapglUrl?: string): Promise<TApi> => {
   return promise;
 };
 
-export const getApi = () => api;
+export const getApi = (): TApi | undefined => api;
diff --git a/apps/demo/app/hooks/useMapContext.ts b/apps/demo/app/hooks/useMapContext.ts
@@ -1,5 +1,4 @@
 import { useContext } from 'react';
-
 import { MapContext } from '../context/map';
 
 export const useMapContext = () => {

diff --git a/apps/demo/app/hooks/useMapEffect.ts b/apps/demo/app/hooks/useMapEffect.ts
@@ -1,7 +1,6 @@
-import { EffectCallback, useEffect } from 'react';
-
-import { TApi, TMap } from '../types';
-
+import type { EffectCallback} from 'react';
+import { useEffect } from 'react';
+import type { TApi, TMap } from '../types';
 import { useMapContext } from './useMapContext';
 
 /**
@@ -18,7 +17,7 @@ export const useMapEffect = (
 ) => {
     const { map, api } = useMapContext();
 
-    return useEffect(() => {
+    useEffect(() => {
         if (!map || !api) {
             return;
         }

diff --git a/apps/demo/app/layout.tsx b/apps/demo/app/layout.tsx
@@ -17,7 +17,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
-        <script src="https://unpkg.com/browser-geo-tz@latest/dist/geotz.js"></script>
+        <script src="https://unpkg.com/browser-geo-tz@latest/dist/geotz.js" />
         {children}
       </body>
     </html>

diff --git a/apps/demo/app/utils/date.ts b/apps/demo/app/utils/date.ts
@@ -7,7 +7,7 @@ const formatter = new Intl.DateTimeFormat('en-US', {
     minute: 'numeric'
 });
 
-export function formatHHMM(date: Date) {
+export function formatHHMM(date: Date): string {
     return formatter.format(date);
 }
 
@@ -25,9 +25,9 @@ export function parseDatepickerFormat(value: string | undefined): Date {
     const result = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
 
     if (result) {
-        date.setFullYear(parseInt(result[1]!));
-        date.setMonth(parseInt(result[2]!) - 1);
-        date.setDate(parseInt(result[3]!));
+        date.setFullYear(parseInt(result[1]));
+        date.setMonth(parseInt(result[2]) - 1);
+        date.setDate(parseInt(result[3]));
     }
 
     return date;

diff --git a/apps/demo/next.config.js b/apps/demo/next.config.js
@@ -1,9 +1,11 @@
+/* eslint-env node -- config */
+
 /** @type {import('next').NextConfig} */
 module.exports = {
   transpilePackages: ["@mapgl-shadows/ui"],
   output: 'export',
-  basePath: '/lighting-control',
-  assetPrefix: '/lighting-control',
+  basePath: process.env.NODE_ENV === 'production' ? '/lighting-control' : '',
+  assetPrefix: process.env.NODE_ENV === 'production' ? '/lighting-control' : '',
   distDir: '../../docs',
   cleanDistDir: true,
 };
diff --git a/apps/demo/package.json b/apps/demo/package.json
@@ -5,7 +5,7 @@
     "dev": "next dev -p 9999",
     "build": "next build",
     "start": "next start",
-    "lint": "eslint . --max-warnings 0"
+    "lint": "eslint ."
   },
   "dependencies": {
     "@2gis/mapgl": "^1.47.0",

diff --git a/apps/demo/project.d.ts b/apps/demo/project.d.ts
@@ -2,6 +2,10 @@ import * as _mapgl from '@2gis/mapgl/types/index.d.ts';
 
 declare global {
     const mapgl: typeof _mapgl;
+
+    interface Window {
+        map: _mapgl.Map
+    }
 }
 
 export as namespace mapgl;