From b48cae029966acaafbe059e3960516e9ebc3b58b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9D=D0=B8=D1=89=D0=B5=D1=82=D0=B0=20=D0=94=D0=BC=D0=B8?= =?UTF-8?q?=D1=82=D1=80=D0=B8=D0=B9=20=D0=90=D0=BD=D1=82=D0=BE=D0=BD=D0=BE?= =?UTF-8?q?=D0=B2=D0=B8=D1=87?= Date: Fri, 7 Jun 2024 12:25:46 +0300 Subject: [PATCH] Lint/format --- apps/demo/app/components/Datepicker.tsx | 14 +- apps/demo/app/components/LightControl.tsx | 25 +- apps/demo/app/components/MapWrapper.tsx | 6 +- apps/demo/app/components/MapglMap.tsx | 111 ++-- apps/demo/app/components/Time.tsx | 9 +- apps/demo/app/components/TimelapseButton.tsx | 6 +- apps/demo/app/context/map.tsx | 9 +- apps/demo/app/context/mapgl.ts | 8 +- apps/demo/app/hooks/useMapContext.ts | 1 - apps/demo/app/hooks/useMapEffect.ts | 9 +- apps/demo/app/layout.tsx | 2 +- apps/demo/app/utils/date.ts | 8 +- apps/demo/next.config.js | 6 +- apps/demo/package.json | 2 +- apps/demo/project.d.ts | 4 + apps/demo/tsconfig.json | 7 +- package-lock.json | 647 ++----------------- packages/eslint-config/react.js | 1 + packages/lighting-control/package.json | 8 +- packages/lighting-control/src/index.ts | 13 +- packages/lighting-control/tsup.config.ts | 10 - packages/lighting-control/vite.config.js | 17 + packages/ui/package.json | 1 - 23 files changed, 223 insertions(+), 701 deletions(-) delete mode 100644 packages/lighting-control/tsup.config.ts create mode 100644 packages/lighting-control/vite.config.js diff --git a/apps/demo/app/components/Datepicker.tsx b/apps/demo/app/components/Datepicker.tsx index fc6aebe..6efd195 100644 --- 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 = ({ 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 = ({ value, disabled = false, onChange }) => { + const _onChange = useCallback((newValue: string | undefined) => { + onChange(parseDatepickerFormat(newValue)) }, [onChange]); - return + return } \ No newline at end of file diff --git a/apps/demo/app/components/LightControl.tsx b/apps/demo/app/components/LightControl.tsx index 0bbd12a..c19c978 100644 --- 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) => { return (
- +
-
) } \ No newline at end of file diff --git a/apps/demo/app/components/MapWrapper.tsx b/apps/demo/app/components/MapWrapper.tsx index a1aa3e8..7ab7228 100644 --- 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
; + return
; }, () => true, -); \ No newline at end of file +); + +MapWrapper.displayName = "MapWrapper"; \ No newline at end of file diff --git a/apps/demo/app/components/MapglMap.tsx b/apps/demo/app/components/MapglMap.tsx index f181ecf..97c264a 100644 --- 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 +// 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 } \ No newline at end of file diff --git a/apps/demo/app/components/Time.tsx b/apps/demo/app/components/Time.tsx index 813d10a..48d740f 100644 --- 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 = ({ value, noIcon = false }) => { +// eslint-disable-next-line react/function-component-definition -- wtf +export const Time: FC = ({ value, noIcon = false }) => { return (
{noIcon ? null : } - + {value}
diff --git a/apps/demo/app/components/TimelapseButton.tsx b/apps/demo/app/components/TimelapseButton.tsx index b974c72..ce5cec1 100644 --- 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 = export const TimelapseButton: FC = ({ active, disabled = false, onClick }) => { - return } \ No newline at end of file diff --git a/apps/demo/app/context/map.tsx b/apps/demo/app/context/map.tsx index 7d9119e..b1c99d8 100644 --- 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; ensureApi: () => Promise; setMap: (map: TMap | undefined) => void; -}; +} export const MapContext = createContext({ ensureMap: () => { diff --git a/apps/demo/app/context/mapgl.ts b/apps/demo/app/context/mapgl.ts index 7cf0a20..663228c 100644 --- 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 | undefined = undefined; -let api: TApi | undefined = undefined; +let promise: Promise | undefined; +let api: TApi | undefined; export const loadMapApi = (mapglUrl?: string): Promise => { if (promise) { @@ -18,4 +18,4 @@ export const loadMapApi = (mapglUrl?: string): Promise => { 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 index 746a13f..0502826 100644 --- 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 index 37b2077..3006767 100644 --- 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 index 363a6e7..ca53736 100644 --- a/apps/demo/app/layout.tsx +++ b/apps/demo/app/layout.tsx @@ -17,7 +17,7 @@ export default function RootLayout({ return ( - +